Question

我的布局就像这样

<div class="row newtryh2">
  <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
    <h2>WiFi via Facebook</h2><span class="border"></span>
    <p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
  <div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
  <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
    <h2>Google Streetview</h2><span class="border"></span>
    <p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
  </div>
</div>

左边的文字和右边的图像以及下一行右边的图像和左边的图像都可以正常工作，但是当它进入移动设备时，我希望文本位于图片的上方第二行，因为它现在在移动设备上：

Text
Image 
Image 
Text

我想要

Text
Image 
Text 
Image

我想知道该怎么做？

谢谢

Answer 1

你可以使用 Flexbox ：

这样做

@media screen and (max-width: 480px) { /* adjust to your needs */
  .row:not(:first-child) {
    display: flex;
    flex-direction: column;
  }
  .row:not(:first-child) > .shadowimg {
    order: 2;
  }
}

<div class="row newtryh2">
  <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
    <h2>WiFi via Facebook</h2><span class="border"></span>
    <p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
  <div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
  <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
    <h2>Google Streetview</h2><span class="border"></span>
    <p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
  </div>
</div>

Answer 2

执行此操作的唯一方法是Flexbox。在“newtryh2”容器上，设置display:flex属性。然后在移动设备上使用flex-direction:column和flex-direction:column-reverse，您可以更改所包含块的顺序。

将文本移至移动设备上的页面顶部

2 个答案: