如何让图片在移动端的文字下方

Question

如何在手机中将图片置于文字下方？并且让文本位于左侧，而不是更多地位于右侧 - 如果这有意义的话:)

CSS (图片): https://pastebin.com/pGBdbBhs

CSS (内容): https://pastebin.com/1SY2JXUa

HTML:

<div class="content">
  <div class="left-200">
    <div>
      <h3>Lorem ipsum</h3>
      <div class="padding-4"></div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
     </div>
    
     <div class="padding-10"></div>
     <img src="./images/default-image.png" alt="Image" class="image"/>
   </div>
 </div>

桌面：

手机：

谢谢！

Answer 1

要进行响应式设计，您可以转到 bootstrap 根目录，也可以在 CSS 中执行@media。看看这个网站，它将为您指明正确的方向。

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

我解决了！基本上，我将其包装在 div 中，如果设备在移动设备上，则设置 display:none;。我对桌面做了同样的事情！

Answer 3

您的 CSS 和 HTML 看起来有些随意。例如那些填充 div。您的 .left-200 class 也有两个显示属性。我建议清理它，然后添加填充、边距等。

你真的只需要 display: flex 和 flex-wrap 来完成这个任务，并相应地设置其他值，比如宽度。

.content {
    padding: 200px 50px;
    display: flex;
    flex-wrap: wrap;
}
#flex-text {
    width: 400px;
}

<div class="content">
        <div id="flex-text">
            <h3>Lorem ipsum</h3>
            p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
                -->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
        </div>
        <div id="flex-image"> <img  src="./images/default-image.png" alt="Image" class="image"/> </div>
    </div>

如何让图片在移动端的文字下方

How to make image go below text for mobile

css

responsive