0
現在、4つの全角div（各divは半角テキスト、四半期画像、四半期画像）を持っていますが、これを8つの全角divフルテキスト×4）をタブレット/モバイル上に表示します。ページがモバイル/タブレットに応答したときのdivの並べ替え
これまではメディアクエリを使用して1つの画像を非表示にしてもう1つの幅にしましたが、画像、テキスト、画像、テキストなどの順序は画像、テキスト、テキスト、画像、画像、テキスト、テキスト、画像。
これらのdivをメディアクエリで並べ替える方法はありますか？正しい順序になっていますか？ （イメージ、テキスト、イメージ、テキストなど）。
.full-width {
padding: 20px 170px;
}
@media only screen and (max-width: 710px) {
.hidden_img {
display: none !important;
}
\t .item-image {
\t width:100% !important;
\t height: 200px !important; \t
\t }
\t .item-text {
\t \t width: 100% !important;
\t }
}
.item-image {
\t width: 24%;
\t height: 100%;
\t display: inline-block;
\t vertical-align:middle;
\t background-size: cover;
}
#private_1 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/private_1.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#private_2 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/private_2.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#corp_1 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_1.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#corp_2 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_2.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#ticket_1 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_1.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#ticket_2 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_2.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#day_1 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/day_1.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
#day_2 {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/day_2.png") no-repeat;
\t background-size: cover;
\t background-position: center center;
}
.booking-container {
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/venue_booking_banner.jpg") no-repeat right 0;
width: 100%;
background-size: cover;
\t padding: 20px;
\t margin-top: 30px;
}
.item-text p, .item-text h4, #intro_text {
font-size: 16px !important;
text-align: center;
}
.item-text {
\t width:50%;
display: inline-block;
vertical-align:middle;
text-align: center;
padding: 0px 50px;
}
.event_info{
font-size: 16px !important;
}
.item {
\t width: 100%;
\t height: 250px;
\t display: table;
\t table-layout: fixed;
}
div {
background: 0 0;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
outline: 0;
}
.content-spacing {
\t padding: 0 !important;
}
#intro_text {
\t padding: 1% 9%;
}<div id="private" class="item">
\t \t \t <div class="item-image" id="private_1" style="margin-right:2%;">
\t \t \t </div>
\t \t \t <div class="item-image hidden_img" id="private_2">
\t \t \t </div>
\t \t \t <div class="item-text">
\t \t \t \t <h4>PRIVATE HIRE</h4>
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
\t \t \t </div>
\t \t </div>
\t \t <div id="private" class="item">
\t \t \t <div class="item-text">
\t \t \t \t <h4>CORPORATE EVENTS</h4>
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
\t \t \t </div>
\t \t \t <div class="item-image" style="margin-right:2%;" id="corp_1">
\t \t \t </div>
\t \t \t <div class="item-image hidden_img" id="corp_2">
\t \t \t </div>
\t \t </div>
\t \t <div id="private" class="item">
\t \t \t <div class="item-image" style="margin-right:2%;" id="ticket_1">
\t \t \t </div>
\t \t \t <div class="item-image hidden_img" id="ticket_2">
\t \t \t </div>
\t \t \t <div class="item-text">
\t \t \t \t <h4>TICKETED EVENTS</h4>
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
\t \t \t </div>
\t \t </div>
\t \t <div id="private" class="item">
\t \t \t <div class="item-text">
\t \t \t \t <h4>DAY EVENTS</h4>
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
\t \t \t </div>
\t \t \t <div class="item-image" style="margin-right:2%;" id="day_1">
\t \t \t </div>
\t \t \t <div class="item-image hidden_img" id="day_2">
\t \t \t </div>
\t \t </div>。
あなたはあなたの構造が正しいですか？それは私のためにちょっと離れているようです。 – Roberrrt
古いブラウザ（IE10以前）をサポートする必要がない場合は、フレックスボックスモデルを使用するように切り替えることをお勧めします。それはあなたが望むものをより簡単な方法で行うことができます。ここから始めましょう。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Vi100
一般的にルールは、解決策が過度に複雑に見える場合は、おそらくそうです。 –