html - 我需要两个元素来通过CSS切换位置

我需要一些CSS定位方面的帮助：

一切都按照我希望用于移动设备的方式进行设置，但是当在更大的屏幕上显示时，我希望id =“ centerpicture”和id =“ centertext”切换位置。

我尝试过“浮动：左/右；”如您所见，但这似乎无法解决问题。

请指教。谢谢。

		@media (max-width:800px) {
			.htmlcontent {
				width: 98.5%;
			}

			.htmlpicture > img {
				display: block;
			}

			#topcontent {
				padding-top: 15px;
			}

			.htmltext > h2, p {
				margin: 0px;
				padding: 0px;
			}

			.htmltext > h2 {
				font-size: 24px;
			}

			.htmltext > p {
				padding-top: 2px;
			}

			.htmltext {
				padding-top: 12px;
				padding-bottom: 12px;
				text-align: center;
			}
		}

		@media (min-width:801px) {
			.htmlcontent {
				display: grid;
				grid-template-columns: 50% 50%;
			}

			.htmlpicture > img {
				display: block;
			}

			.htmltext {
				padding: 12px;
				text-align: center;
			}

			#centerpicture {
				float: right;
			}

			#centertext {
				float: left;
			}
		}

<body>
	<div class="htmlcontent" id="topcontent">
		<div class="htmlpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext">
			<h2>WHO ARE WE?</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>

	<div class="htmlcontent">
		<div class="htmlpicture" id="centerpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext" id="centertext">
			<h2>WHAT SETS US APART?</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>

	<div class="htmlcontent">
		<div class="htmlpicture">
			<img src="https://www.fing.edu.uy/inco/grupos/gsi/img/placeholder.png" alt="Placeholder" height="100%" width="100%">
		</div>
		<div class="htmltext">
			<h2>COMMITED TO QUALITY</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis vel commodo, sem luctus tellus ac penatibus dictumst nostra dapibus tristique. Fames gravida scelerisque id lobortis magnis conubia mauris orci mi, morbi sociis phasellus sed ullamcorper litora sodales. Odio velit ante varius bibendum, faucibus blandit maecenas ligula torquent, ad netus sociosqu.</p>
		</div>
	</div>
</body>

最佳答案

您可以使用display: flex;和order属性。这是例子。您可以在媒体查询中更改顺序。



#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}



div#myRedDIV   {order: 3;background:coral;}
div#myBlueDIV  {order: 1;background:lightgreen;}
div#myGreenDIV {order: 4;background:pink;}
div#myPinkDIV  {order: 2;background:red;}

@media screen and (max-width: 767px){
         div#myRedDIV   {order: 1;}
         div#myBlueDIV  {order: 2;}
         div#myGreenDIV {order: 3;}
         div#myPinkDIV  {order: 4;}
}



      <div id="main">
  <div id="myRedDIV">1</div>
  <div  id="myBlueDIV">2</div>
  <div id="myGreenDIV">3</div>
  <div  id="myPinkDIV">4</div>
</div>

关于html - 我需要两个元素来通过CSS切换位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49846842/