javascript - 当页面响应手机/平板电脑时重新排序 div

Question

目前我有 4 个全宽 div(每个 div 是:半文本、四分之一图像、四分之一图像)，我希望在平板电脑/移动设备上将其更改为 8 个全宽 div(全图像、全文本 x4)。

到目前为止，使用媒体查询，我已经隐藏了一张图片并使另一张全宽，但顺序不是图片、文字、图片、文字等。它是图片、文字、文字、图片、图片、文字、文字，图像。

有没有办法用媒体查询对这些 div 重新排序，使它们的顺序正确？ (图片、文字、图片、文字等)。

.full-width {
    padding: 20px 170px;
}
@media only screen and (max-width: 710px) {
    .hidden_img {
        display: none !important;
    }
	.item-image {
	width:100% !important;
	height: 200px !important;	
	}
	.item-text {
		width: 100% !important;
	}
}
.item-image {
	width: 24%;
	height: 100%;
	display: inline-block;
	vertical-align:middle;
	background-size: cover;
}
#private_1 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/private_1.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#private_2 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/private_2.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#corp_1 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_1.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#corp_2 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_2.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#ticket_1 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_1.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#ticket_2 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_2.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#day_1 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/day_1.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
#day_2 {
	background: url("www.kentunion.co.uk/pageassets/venue-hire/day_2.png") no-repeat;
	background-size: cover;
	background-position: center center;
}
.booking-container {
	    background: url("www.kentunion.co.uk/pageassets/venue-hire/venue_booking_banner.jpg") no-repeat right 0;
    width: 100%;
    background-size: cover;
	padding: 20px;
	margin-top: 30px;
}
.item-text p, .item-text h4, #intro_text {
font-size: 16px !important;
text-align: center;
}
.item-text {
	width:50%;
display: inline-block;
vertical-align:middle;
text-align: center;
padding: 0px 50px;

}
.event_info{
font-size: 16px !important;
}

.item {
	width: 100%;
	height: 250px;
	display: table;
	table-layout: fixed;
}


div {
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: 0;
}
.content-spacing {
	padding: 0 !important;
}
#intro_text {
	padding: 1% 9%;
}

<div id="private" class="item">
			<div class="item-image" id="private_1" style="margin-right:2%;">
			</div>
			<div class="item-image hidden_img" id="private_2">
			</div>
			<div class="item-text">
				<h4>PRIVATE HIRE</h4>
				<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>
			</div>
		</div>

		<div id="private" class="item">
			<div class="item-text">
				<h4>CORPORATE EVENTS</h4>
				<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>
			</div>
			<div class="item-image" style="margin-right:2%;" id="corp_1">
			</div>
			<div class="item-image hidden_img" id="corp_2">
			</div>
		</div>

		<div id="private" class="item">
			<div class="item-image" style="margin-right:2%;" id="ticket_1">
			</div>
			<div class="item-image hidden_img" id="ticket_2">
			</div>
			<div class="item-text">
				<h4>TICKETED EVENTS</h4>
				<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>
			</div>
		</div>

		<div id="private" class="item">
			<div class="item-text">
				<h4>DAY EVENTS</h4>
				<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>
			</div>
			<div class="item-image" style="margin-right:2%;" id="day_1">
			</div>
			<div class="item-image hidden_img" id="day_2">
			</div>
		</div>

.

Answer 1

首先，您正在为您的所有容器使用 private 的 id。这是错误的。 ID 应该用于唯一元素。你应该使用 class="private" 因为你的元素是重复的。

如果浏览器支持不是您手头元素的问题，我建议使用 CSS Flex-box 为您的内容。通过使用这种方法，您可以使用 CSS Order property 来管理元素的顺序。 这让您可以更灵活地进行媒体查询。

在您的特定情况下，您需要为容器设置一个 display: flex; 属性，然后使用媒体查询将 order 属性附加到每个元素在你的容器内。这里的编号从 0 开始，因此，您的元素将首先编号为 order: 0，第二个编号为 order: 1，依此类推。

类似于:

  .item {
    display: flex;
  }

  .item .item-image {
    order: 0;
  }

  .item .item-text {
    order: 1;
  }

  .item .item-image.hidden_img {
    order: 2;
  }