使用引导器的列拉/推送
使用引导器的列拉/推送
提问于 2017-03-20 12:12:19
我是新来的。我设计了一个非常简单的结构，它包含两个主要的-lg-6列，第一个列包含一个图像，第二个列包含一个文本，现在我的结构是
col-xs-12 6
商业、商业、金融等行业的商品、金融、商业、金融、商业、金融、金融等行业的商业、商业、金融、金融等行业的商业、金融等行业的商业、金融、金融等行业。
col-xs-12 6
一些文本、商品、商业、金融、金融、商业、金融、金融、商业、金融、商业、金融、金融等行业的商品、商品、商业、金融、金融、商业、商业、金融、金融、商业、金融等行业的商品、金融、金融、商业、金融、金融等行业的商品、商品、商业、金融等行业的商品、商品、金融等行业的商品、商品、商业、金融、金融等行业的一些商品、商品、金融、金融、商业、商业、金融等行业的商品、商品、金融等行业的一些商品、商品、商业、金融等行业
现在，在移动视图中，左列获得了优先权，但我想要的是，当第二行开始时，有一个文本列应该放在第一位，但我希望图像列(非常下一列)第一位，我研究了引导程序的拉/推，但是我真的可以在我的场景中更多地使用它--在引导程序网站上也没有提到这样的细节。这是我的实际代码
<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>
任何形式的帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-20 12:20:01
你得考虑一下“移动第一”。这意味着首先创建所需的小布局，。然后使用推拉来调整列，以实现更大的布局.
演示：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>演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42903285
复制相关文章
相似问题
腾讯云开发者
