Bootstrap中的Zigzag布局

Question

我正在网页上工作并尝试响应像这张图片一样开发的布局

我使用最新的bootstrap，我的代码是

<div class="col-sm-3 col-md-3">
        <img src="<?php echo base_url();?>assets/img/management-team/female.png" alt="" class="omt_img" />
        <div class="clr"></div>
        <h3 class="omt_title">Managing Director</h3>
    </div>
    <div class="col-sm-9 col-md-9">
        <h2 class="omt_name">Miss B Ayub</h2>
        <h4 class="omt_edu">PhD Psychology</h4>
        <hr>
        <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
    </div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div class="col-xs-9 col-sm-9 col-md-9">
        <h2 class="omt_name">Miss B Ayub</h2>
        <h4 class="omt_edu">PhD Psychology</h4>
        <hr>
        <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3">
        <img src="<?php echo base_url();?>assets/img/management-team/male.jpg" alt="" class="omt_img" />
        <h3 class="omt_title">Managing Director</h3>
    </div>

代码在平板电脑屏幕上工作正常，但当我转移到移动设备时，布局显示不完美......而且我得到这样的布局

1. 图片
2. 指定
3. 名称
4. 教育
5. 介绍
6. 名称
7. 教育
8. 介绍
9. 图片
10. 指定

但我想展示像这种模式的东西

1. 图片
2. 指定
3. 名称
4. 教育
5. 介绍
6. 图片
7. 指定
8. 名称
9. 教育
10. 介绍

是否可以使用bootstrap使用纯css进行此操作？

Answer 1

列排序

轻松更改可以使用的引导CSS的顺序.col-md-push-*和.col-md-pull-*

    <div class="col-sm-3 col-md-3">
    <img src="<?php echo base_url();?>assets/img/management-team/female.png" alt="" class="omt_img" />
    <div class="clr"></div>
    <h3 class="omt_title">Managing Director</h3>
</div>
<div class="col-sm-9 col-md-9">
    <h2 class="omt_name">Miss B Ayub</h2>
    <h4 class="omt_edu">PhD Psychology</h4>
    <hr>
    <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
</div>

<div class="col-sm-3 col-md-3 col-md-push-9">
    <img src="<?php echo base_url();?>assets/img/management-team/male.jpg" alt="" class="omt_img" />
    <h3 class="omt_title">Managing Director</h3>
</div>
<div class="col-sm-9 col-md-9 col-md-pull-3 ">
    <h2 class="omt_name">Miss B Ayub</h2>
    <h4 class="omt_edu">PhD Psychology</h4>
    <hr>
    <p class="omt_para">Being a student of human behaviour, I observed that technology has greatly influenced our lives especially in the field of education. Students now a days are more engaged through technology based learning than traditional. This observation especially through my research inspired me to come up with OTI. This unique project is the solution to the problems faced by students of this day and age. Students want cutting edge technology with a tutor who is a facilitator and a mentor. This is exactly what OTI provides, online tutoring from the comfort of your own home and with the tutor of your choice.</p>
</div>