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

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

[标题]

[图片]

[内容]

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

下面的代码片段是使用mobile first创建的，以便可以在大屏幕中对其重新排序。但在中/大屏幕中，内容列不在标题的正下方内容栏应填充剩余高度。

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

.toll{
高度：150像素；
}

在较大的显示中对列重新排序
标题
形象
内容

除非你的内容填满了空白，否则我不认为你可以在没有空白的引导下完成这项工作，但是你可以做的是，因为它只是一个图像，你可以在两个点中加载图像，并根据屏幕大小使用

.visible-*

和

隐藏-*

隐藏图像

.toll{height:150px；}

在较大的显示中对列重新排序
形象
标题
形象
内容

您不能直接在引导中执行此操作。您需要根据屏幕大小将内容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>

在较大的显示中对列重新排序
标题
形象
内容

谢谢。但我只是用你的黑对标题div的可见和隐藏。我认为这是较少的负荷相比，两个图像！