Question

我是bootstrap的新手。我设计了一个相当简单的结构，它包含两个主要的 col-lg-6 列，第一列包含一个图像，第二列包含一个文本，现在我的结构是什么

col-xs-12 col-md-6 col-xs-12 col-md-6

图像一些文字

col-xs-12 col-md-6 col-xs-12 col-md-6

一些文字图片

现在在移动视图中会发生什么，左列首先获得优先级但我想要的是第二行开始时有一个文本列应该首先但我想要图像列（下一列）首先我研究了bootstrap的拉/推，但我真的可以在我的场景中使用它更多，因为在bootstrap网站上没有提到这样的细节..这是我的实际代码

 <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12 col-md-6" style="padding-right: 0;">
                    <div class="arrow">
                        <img src="<?php echo base_url() ?>images/community-work-4.jpg" class="img-responsive" />
                    </div>

                </div>
                <div class="col-xs-12 col-md-4">
                    <h2>Food Drive</h2>
                    <!--                    <h3>Date: Dec 22, 2016</h3>-->
                    <!--                    <br/>-->
                    <h4>Team Carassauga Pakistan Pavilion 2016 was honoured to be a part of community food drive to support ICNA Canada and Eden Food Bank. Every year from 2007 to 2012, approximately 5% of Canadian children and 8% of Canadian adults lived in food insecure households. This means that they did not have access to a sufficient variety or quantity of food due to lack of money. Community food drives can bring positive change in providing families with food and other basic necessities for better living...</h4><br/>
                    <a href="<?php echo base_url() ?>home/community_individual/3">Continue Reading</a>

                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <h2>Cultural Exchange</h2>
                    <!--                    <h3>Date: Dec 22, 2016</h3>-->
                    <!--                    <br/>-->
                    <h4>Team Carassauga Pakistan Pavilion, gained its title through the work and effort they invested in for about a year to put together the beautiful marriage of cultural exchange and wholesome hosting, opening their doors through the fantastic platform of Carassauga 2016 held at Hershey Sports Centre, to the fellow Torontonians. This was a successful attempt by the team at embracing their Pakistani identity and harmonizing it with the true Canadian values of acceptance and diversity...<br/>
                        <br/>
                        <a href="<?php echo base_url() ?>home/community_individual/2">Continue Reading</a>
                </div>

                <div class="col-xs-12 col-md-6" style="padding-left: 0;">
                    <div class="arrow-right">
                        <img src="<?php echo base_url() ?>images/culture.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>


        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12 col-md-6" style="padding-right: 0;">
                    <div class="arrow">
                        <img src="<?php echo base_url() ?>images/community-work-1.jpg" class="img-responsive" />
                    </div>
                </div>
                <div class="col-xs-12 col-md-4">
                    <h2>Muslim Welfare </h2>
                    <!--                    <h3>Date: Dec 22, 2016</h3>-->
                    <!--                    <br/>-->
                    <h4>Team Carassauga Pakistan Pavilion 2016 was honoured to volunteer with Muslim Welfare Center in Scarborough for the food drive. As a Canadian it is our responsibility to help out unprivileged individuals with the best of our abilities that we take for granted......</h4>
                    <br/>
                    <a href="<?php echo base_url() ?>home/community_individual/1">Continue Reading</a>
                </div>
            </div>
        </div>

任何形式的帮助都将不胜感激！

Answer 1

你需要考虑“移动优先”。这意味着首先创建所需的小布局。然后使用推/拉来调整列，以获得更大的布局......

演示：http://www.codeply.com/go/lcNRCPKZ2s

    <div class="row">
        <div class="col-xs-12 col-md-6 col-md-push-6">
            <div class="arrow-right">
                img
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-md-pull-6">
              text
        </div>
    </div>

Demo

使用bootstrap的列拉/推

1 个答案: