css - bootstrap 中的rowpan和colspan

目前正在引导程序在桌面上的位置，我正在完全按照以下结构进行操作

column1 column2 column3 column4 column5

但在平板电脑视图上

我需要像下面的结构

column1  `column3`
column2   column4` column5

这是我的HTML代码

<footer class="footer">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkerblue">
                <p class="footer-ul footer-text-align">
                    <span class="footer-headtext text-uppercase">destination</span><br/>
                    <span class="footer-Kilomet">6.8 Kms </span>
                    <span class="footer-min">25 Min away</span>
                </p>

            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkenblue">
                <ul class="footer-ul footerstatus-text-align">
                    <li class="footer-headtext text-uppercase">
                        Status
                    </li>
                    <li class="footer-min-text">
                        In Transit
                    </li>
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-4 col-md-push-6">
                <div class="dotted">
                    <ul class="footer-ul footer-direction-text">
                        <li>
                            <i class="fa fa-circle-o direction-icon-circle"></i>
                                <div class="footer-map-text">Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue,
                                North End, Silhurst, Loamshire, SH15 6BP</div>
                        </li>
                        <li class="footer-li-pad">
                            <i class="fa fa-map-marker direction-icon"></i>
                                <div class="footer-map-text">As Directed</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        DATE
                    </li>
                </ul>
                <ul class="footer-ul list-inline footer-text-date">
                    <li>
                        <em class="fa fa-calendar"></em> 25 Dec, 2015
                    </li>
                    <li>
                        <em class="fa fa-clock-o"></em> 16:30
                    </li>
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2  col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        BOOKING REFERENCE
                    </li>
                    <li class="footer-li-pad">
                        92737260
                    </li>
                </ul>
            </div>
        </div>
    </footer>

用我的代码

实际上，通过上面的代码，我正在获取桌面版本



但不适用于平板电脑



第1列和第2列一个接一个，但第3列未从第2列开始，而是在第1列附近开始

请帮我哪里做错了

谢谢

最佳答案

您可以这样构造它：

<div class="col-xs-12 col-md-4">
    <div class="column1 col-xs-2 col-md-6"></div>
     <div class="column3 col-xs-2 col-md-6"></div>
</div>
<div class="col-xs-12 col-md-8">
    <div class="column2 col-xs-2 col-md-4"></div>
    <div class="column4 col-xs-2 col-md-4"></div>
    <div class="column5 col-xs-2 col-md-4"></div>
</div>

关于css - bootstrap 中的rowpan和colspan，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35403982/