Question

我的网站上有这种响应式布局。当屏幕宽度小于767px时，图像隐藏在文本下方。有没有办法让图像（和标题，即.rightColumn）改为.leftColumn？

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 0; }

.columnsContainer { position: relative; margin: 1.5em 0; padding:1.5em ; border: 1px solid  #fff;}

.leftColumn { margin-bottom: .5em; }

.rightColumn .wp-caption{border-width: 0px;}

.rightColumn {min-height:100%;}

/* MEDIA QUERIES */
@media screen and (min-width: 767px ) {
  .leftColumn { margin-right: 51%; }

	.rightColumn { position: absolute; top: 0; right: 0; width: 48.5%; }   
}

<html>
	<head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>Responsive Two Column Layout (Left Column Fluid)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  
  <body>
 <div class="columnsContainer">
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
	<li>2 Days each of guided salmon, pike &amp; trout/grayling fishing</li>
	<li>7 Night bed &amp; breakfast</li>
	<li>Full equipment &amp; transfers provided</li>
	<li>Peak season 1st April - 15th November</li>
	<li>Glasgow or Edinburgh airport transfers Included</li>
	<li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow &amp; Perth</span></li>
</ul>
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">View Trip Dossier</a>

</div>
<div class="rightColumn">
<p style="text-align: right;">

<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" /> 
  <br>Experience the best of Scotland's fishing with this six day break!

</p>

</div>
</div>

  </body>
</html>

Answer 1

最简单的方法是在rightColumn div之前添加leftColumn div。它不应该弄乱结构并首先显示图像

<div class="rightColumn">
<p style="text-align: right;">

<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" /> 
  <br>Experience the best of Scotland's fishing with this six day break!

</p>

</div>
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
    <li>2 Days each of guided salmon, pike &amp; trout/grayling fishing</li>
    <li>7 Night bed &amp; breakfast</li>
    <li>Full equipment &amp; transfers provided</li>
    <li>Peak season 1st April - 15th November</li>
    <li>Glasgow or Edinburgh airport transfers Included</li>
    <li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow &amp; Perth</span></li>
</ul>
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">View Trip Dossier</a>

</div>

Answer 2

使用引导程序并使用 flex-reverse-column 这应该可以工作

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="./assests/style.css">

  <title>Hello, world!</title>
</head>

<body>
  <h1>HELLO BOOTSTRAP</h1>

  <div class="row flex-column-reverse flex-md-row">

    
    <div class="col-sm-12 col-md-6">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
        vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
        eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
        fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
        quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
        venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
        ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
        a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
        suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
        Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
        tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non, 
        suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
      </p>
      <p>
        Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
        interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
        nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
        id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
        Praesent massa purus, iaculis eget consectetur sed, dictum in turpis. 
        Mauris quis tempus massa. Sed quam justo, viverra id
        ligula sit amet, aliquet vehicula tortor.
      </p>
      
    </div>
    
    <div class="col-sm-12 col-md-6">
      <img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
    </div>

  </div>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>
  <!-- JQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</body>

</html>```

响应式布局 - 在小屏幕上使图片高于文本

2 个答案: