根据屏幕大小更改引导带DIV顺序

Question

场景:我有一个编辑器小部件(想想textarea)作为一个可呈现的模板，一个用于编辑模板的预览面板，以及在呈现预览时生成的错误消息列表。我的计划是这样的：

small screen:            large screen:

+--------------+         +--------------+ +--------------+
|              |         |              | |              |
|    editor    |         |    editor    | |    preview   |
|              |         |              | |              |
+--------------+         +--------------+ +--------------+
|              |         +-------------------------------+
|    errors    |         |                               |
|              |         |            errors             |
+--------------+         |                               |
|              |         +-------------------------------+
|   preview    |         
|              |
+--------------+    

我只需要这两种布局(而不是三种或四种)，因为只有-lg足够大，可以让编辑器和预览相互靠近。为了控制大小，我在所有三个DIVs中添加了col-xs-12，在编辑器和预览中添加了col-lg-6 (错误列表应该保持在大屏幕上的12 )。

其他关于这个主题的文章建议，“最小”的布局决定HTML中DIVs的顺序，因此它是:编辑器、错误、预览。他们进一步告诉改变大屏幕上的顺序-拉和推-类。我尝试通过在预览版中添加col pl-6和在错误中添加col push-6来做到这一点。据我所知，相对于元素的当前位置，推/拉工作应该已经将预览拉回第一行，并将错误框推入第二行。

请注意，我没有使用“行”类，因为我不完全理解如何使用它们；将元素放置到行中应该取决于屏幕大小，而不是由HTML固定(这就是响应性布局的全部要点，不是吗？)

其他帖子也建议将其中一个盒子渲染两次，根据屏幕大小让其中一个看不见，但他们没有详细解释为什么这是个好主意。这纯粹是一个布局问题，同样，响应性布局的全部要点是，为了适应屏幕大小，我不必搞砸HTML。

Answer 1

在你的问题中，你提到使用行。.row清除列的浮动，并调整列的左右边距，这样外部就不会有额外的填充，不使用.row会搞乱布局。下面是一个非常全面的引导引导网格：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works。

在纯css中使用Flexbox是唯一的方法。为了解决较旧的浏览器(包括小于或等于ie9)，我使用了现代派(这个演示链接中的那个在html元素上添加了.flexbox或.no-flexbox )，它只是为了这个演示。通过这种方式，您可以在支持flex模型的浏览器上隔离使用flex模型，您的回退将是在html中设置的标准引导列。不要忘记遵循GetBootstrap.com上的网格说明。你需要自己做一个现代化的建筑。

要让Bootstrap.css在IE8上工作，您需要使用Respond.js --查看它们的文档，并在本地将CSS与相对路径链接起来。使用jQuery 1系列，大于1.10，但1.9个工作。旧的IE8浏览器不支持jQuery 2。

​

​

演示：http://jsbin.com/dimuq/1

小视野港：

​

​

大视野港：

​

​

CSS：

/* uses Modernizr to add .flexbox to html class, if not supported the fallback are the basic bootstrap grid */
@media (min-width:992px) { /* choose your min-width this is using the md- default */
  .flexbox .flex-row.row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

  .flexbox .flex-row [class*=flexcol-] {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
  
  .flexbox .flex-row .flexcol-editor, 
  .flexbox .flex-row .flexcol-preview {width:50%;}


  .flexbox .flex-row .panel {
        width: 100%;
        /*something to keep it open and add some inner style */
    }

  .flexbox .flex-row .flexcol-errors {
        order: 2;
        width:100%;
    }
}

在这里了解有关Flexbox的更多信息：http://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://philipwalton.github.io/solved-by-flexbox/

HTML

<div class="container">
  <div class="flex-row row">
      <div class="col-md-6 flexcol-editor">
        <div class="panel panel-default">
         <div class="panel-heading">Editor</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
        </div>
      </div>
      
      <div class="col-md-6 flexcol-errors">
      
        <div class="panel panel-default">
         <div class="panel-heading">Errors</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et.</div>
        </div>
  
      </div>
      
    
      <div class="col-md-12 flexcol-preview clearfix">
        <div class="panel panel-default">
         <div class="panel-heading">Preview</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
        </div>
      </div>

Answer 2

试试这个：

<div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    editor 
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-md hidden-lg">
                    errors 
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 ">
                    preview  
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-sm hidden-xs">
                    errors 
                </div>
            </div>

Answer 3

我建议您检查一下这，以便在这方面帮助您。

每天与Bootstrap一起工作，对我来说这是很好的工作。做一些更“激进”的事情可能会让你处于这样一个位置:你应该重新构建基本的CSS代码来满足你的需要。

另一种解决方案是在转向移动时使用jQuery来附加或前置。希望这些都能帮到你！