Question

大家好我有sdie的图像面和一些文字，我试图让它出现在移动设备上的文字下面但现在它出现在它上面，我使用bootstrap 3。

HTML：

<div class="row">
  <div class="col-xs-12 col-md-6 ">
    <div class="about-img"><img src="img/about.jpg" class="img-responsive" alt=""></div>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="about-text">
      <h2>Title</h2>
      <hr>
      <p>Bryggeriet är en restaurang, sportbar och nattklubb som ligger mitt på Avenyn i Göteborg. Sedan vi öppnade portarna 1993 har vi varit ett självklart val för alla som vill äta riktigt god mat, ta en trevlig lunch, följa sitt favoritlag i Sportbaren, komma förbi på en after work eller dansa helgnatten lång. Eller om man bara vill beställa någonting gott att dricka i en avslappnad och gemytlig miljö.</p>
      <p>Hos oss kan och bör du förvänta dig mat som är en fröjd för både ögat och magen. Här står maten i fokus och vi tillagar alla våra rätter från grunden. Det betyder att du får fräsch mat som tillagas när du beställer den, gjord på råvaror av högsta kvalitet. Vi tar inga genvägar, utan serverar endast sådant som vi själva skulle uppskatta att få på tallriken..</p>
    </div>
  </div>
</div>

CSS：

    @media only screen and (max-width: 768px) {

}

我试图浮动元素然后使用clear：两者但我似乎无法使任何工作使图像显示在底部od所有文本下方的div。

谢谢

Answer 1

您可以在中画面和上画面使用以下引导程序推拉类;

col-md-pull-6, col-md-push-6

这将重新组织内容流 - 例如：https://jsfiddle.net/hfwr6n8z/2/

您还应该重新构建HTML，并将图像包装器div放在DOM的最后，这样它最后会显示在小屏幕上。

让图片显示在移动设备上的文字下方

1 个答案: