重新排序引导程序中的列以获得更大的显示

Question

此网格的移动和平板电脑布局如下：

[标题]

[图片]

[内容]

但是，在中/大屏幕中，我想将其更改为这种布局

下面的代码 sn-p 是使用移动优先创建的，以便可以在大屏幕中重新排序。但内容列不在中/大屏幕的标题下方。 内容栏应填满剩余高度。

如何使它达到所需的布局？如果通过 bootstrap 无法实现，我可以使用 flexbox 吗？

.tall {
  height: 150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row"> 
    <div class="col-sm-12">
      <h4>Reorder columns in larger display</h4>
      <div class="row"> 
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
          <div class="well">Header</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
          <div class="well">Content</div>
        </div>
      </div>    
    </div>
  </div>
</div>

Answer 1

我认为你不能在没有空格的情况下使用 bootstrap 开箱即用地完成此操作，除非你的内容填充了它，但你可以做的，因为它只是一个图像，在两个位置加载图像并隐藏和显示取决于.visible-* 和 .hidden-* 的屏幕尺寸。

.tall {height: 150px;}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row"> 
    <div class="col-sm-12">
      <h4>Reorder columns in larger display</h4>
      <div class="row"> 
         <div class="col-xs-12 col-sm-12 col-md-6 hidden-sm hidden-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Header</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 visible-sm visible-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Content</div>
        </div>
      </div>    
    </div>
  </div>
</div>

Answer 2

您不能直接在引导程序中执行此操作。您需要根据屏幕大小将内容 div 移动到标题 div 旁边。这是无法做到的，因为 css 无法在 html 周围移动 div。

1.一种解决方案是使用 jquery 来移动 div 大小的变化。请参阅下面的代码示例。但这可能会导致性能问题，因为它会在调整屏幕大小时检查条件。

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" type="application/javascript"></script>
<script type="application/javascript">
    function moveDiv(){
        if($(window).width() > 990 ){ // screen size 
            $("#content").insertAfter("#header"); //insert after header div
        }else{
            $("#content").appendTo("#contentbox"); // append it as child to contentbox
        }
    }
    $(document).ready(function () {
        moveDiv();// default check whenever page loads
        $(window).resize(function(){
         moveDiv(); // on resize check
        });
    });
</script>
<div class="container text-center">
<div class="row">
    <div class="col-sm-12">
        <h4>Reorder columns in larger display</h4>
        <div class="row">
            <div id="headerbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="header" class="well">Header</div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6">
                <div class="well tall">Image</div>
            </div>

            <div id="contentbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="content" class="well">Content</div>
            </div>

        </div>
    </div>
</div>

1234563 : 参考lamelemon的帖子）

1. 这是需要考虑的新问题。尝试在最近引入的 CSS 中使用网格布局。无论您解释什么，都可以仅使用 css 用几行代码来完成。 https://css-tricks.com/snippets/css/complete-guide-grid/ 和 观看此 youtube 视频 https://www.youtube.com/watch?v=3vJE3bVoF-Q 以获取网格演示

如果你不使用引导程序，你可以像我在代码 sn-p 中解释的那样使用常规 css 来执行此操作。但是你必须处理与旧浏览器的兼容性。

.tall {
  height: 150px;
}

.divborder {
  border: hidden;
  margin: 1em;
  background-color: grey;
}

@supports (display: grid) /*If browser supports grid*/  {

 /*default div is displayed one by one*/
 
 /*for bigger screen sizes*/
  @media all and (min-width: 600px) {
    .box { /* grid container*/
      display: grid;
      grid-template-columns: 1fr 1fr; /*Specify number of columns 1fr is one fraction of screen*/
      grid-template-rows: 1fr 1fr; /*Specify number of rows*/
    }
    .header {
      grid-row: 1/2; /*start from 1 and end at 2 */
      grid-column: 2/-1; /*start from 2 and end of box (left to right edge)*/
    }
    .image {
      grid-row: 1/-1; /*top to bottom of row*/
      grid-column: 1/2
    }
    .content {
      grid-row: 2/-1;
      grid-column: 2/-1;
    }
  }
}
/*Code for backward compatability*/

<h4>Reorder columns in larger display</h4>
<div class="box">
  <div id="header" class="header divborder">Header</div>
  <div class="image tall divborder">Image</div>
  <div id="content" class="content well divborder">Content</div>
</div>