Question

我希望你很好，我正在尝试使我的桌面网站响应。目前我在桌面上有以下布局。

IMAGE_1_DIV TEXT_1_DIV

TEXT_2_DIV IMAGE_2_DIV

IMAGE_3_DIV TEXT_3_DIV

因此文本DIV来自右，左和右。

它们是方框，在12个中占据6列。

因此，对于小型移动屏幕，我希望盒子占据整个宽度，因此12列可以正常工作。但现在盒子的订购是。

*IMAGE_1_DIV*    
*TEXT_1_DIV*
*TEXT_2_DIV*      <<<<< This is now showing beneath the first text box
*IMAGE_2_DIV*
*IMAGE_3_DIV*   
*TEXT_3_DIV*

有人可以建议我如何让我的TEXT_2_DIV显示在IMAGE_2_DIV下方吗？

<section id="passions-section">

     <div class="container xs-col-12 col-6">
      <h1 class="display-5 text-center">Passions</h1>
        <div class="row">
          <div class="xs-col-12 col-6 passions square-1">
           <img src="./img/guitar.jpg" class="img-fluid rounded">
          </div>
          <div class="xs-col-12 md-col-6 passions square-1-text text-center">
          <div class="vertical-align">
          <p>Music and art are a core part of my personality</p>
          </div>
          </div>
        </div>
         <div class="row">
          <div class="xs-col-12 md-col-6 passions square-2-text text-center">
           <div class="vertical-align">
           <p>Music and art are a core part of my personality</p>
          </div>
          </div>
          <div class="xs-col-12 md-col-6 passions square-2">
            <img src="./img/camera.jpg" class="img-fluid rounded">
          </div>
        </div>
         <div class="row">
          <div class="xs-col-12 md-col-6 passions square-3">
            <img src="./img/paint.jpg" class="img-fluid rounded">
          </div>
          <div class="xs-col-12 md-col-6 passions square-3-text text-center">
          <div class="vertical-align">
           <p>Music and art are a core part of my personality</p>
          </div>
          </div>
        </div>
      </div>
  </section>  

#passions-section{
    padding: 2rem 0 2rem 0;
}
#passions-section h1{
    padding-bottom: 1rem;
}
#passions-section .container{
    margin-bottom: 2rem;
}
.passions{
    background-color: #ffffff;
    box-shadow: 0px 0px 40px -10px rgba(59,66,71,1);
}
.vertical-align{
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.passions p{
    font-size: 1.2rem;
    padding: 0 1rem 0 1rem;
}
.passions img{
    height: auto;
    width: 100%;
    opacity: 0.8;
}

Answer 1

如果您使用flexbox，您可以轻松地在移动设备上重新排序div，但是在使用bootstraps类时也会很麻烦。如果我能看到你的页面看起来像我可以使用flexbox重建它。

更简单的解决方案是创建第二个重复的TEXT_2_DIV并将其放在IMAGE_2_DIV之后，让它在桌面上显示：none然后在移动设备上显示：block。在移动设备上进行第一次TEXT_2_DIV显示：无。

这有意义吗？

import java.util.regex.Matcher;
import java.util.regex.Pattern;
class Ideone {
 public static void main(String[] args) throws java.lang.Exception {
  String regex = "(?:xxxxxxx)V[0-9]+_[0-9]+_[0-9]+(?:\\.[a-z]+)?";
  String string = "public void doSomething() {\n" 
                + "    return \"xxxxxxxV1_0_0.yyyyyyyy\";\n" 
                + "}";
  String subst = "xxxxxxxV2_0_0";

  Pattern pattern = Pattern.compile(regex, Pattern.MULTILINE);
  Matcher matcher = pattern.matcher(string);

  String result = matcher.replaceAll(subst);
  System.out.println("Substitution result: " + result);
 }
}

将DIV订购从桌面安排到智能手机

1 个答案: