css - 我在同一行中有两个标题，但我不知道如何布局页面以使其在移动设备上运行

Question

<div class="row rowItem">

<div class="labelTitle col-sm-3">
    <h2>Section Title</h2>
</div>


<div class="labelTitle col-sm-offset-6">
    <h2>Section Title</h2>
</div>


<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

<div class="col-sm-3">
    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>


<div class="col-sm-3">

    <div class="image">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
    </div> 

    <div class="text">
        <h4 class="font-bold">
            <a href="#">Title</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p> 
    </div> 
</div>

您可以在此处找到示例 http://diegopalma.com/test/

最后一行有 3 列。前两列属于一个章节标题，第三列属于另一个章节标题。

我设法使用第二个标题的偏移类在桌面上正确显示它，但当然我的方法不适用于移动设备。

有什么想法或建议吗？

Answer 1

这是您要找的吗？

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class=" col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->

    <div class="col-xs-12 col-sm-6">
        <h2>Section Title</h2>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
            <div class="col-xs-12 col-sm-6">
                <div class="image">
                    <a href="#">
                        <img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
                    </a>
                </div>
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.col-->
</div><!--/.row-->