Bootstrap - 在桌面和移动设备中对齐文本和列表

Question

我想创建一个带有图片列表的文本

用于桌面/平板电脑视图，但对于移动视图，我会以这种方式显示

这是我尝试做的方式

<div class="row">
  <div class="col-lg-9 col-md-9 col-xs-12">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ..../p>
  </div>
  <div class="col-lg-3 col-md-3 col-xs-12">
    <p>More..</p>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
</div>

有哪些提示可以让它更好，更像图像？

由于

Answer 1

您可以执行以下操作：https://jsfiddle.net/zoypggm2/1/

.more {
  float: right;
  margin-top: 10px;
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.more-mobile {
  margin-top: 10px;
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  display: none;
}

@media screen and (max-width: 768px){
    .more {
      display: none;
    }
    .more-mobile {
      display: block;
    }
}

Answer 2

您可以尝试以下代码。 ＆＃34; .hidden-XS＆＃34;和＆＃34; .hidden-sm＆＃34;用于隐藏相应屏幕中的元素。和＆＃34; .visible-xs＆＃34;和＆＃34; .visible-sm＆＃34;在各自的屏幕上显示。

<div class="container">
  <div class="row">
    <div class="col-md-12">
   <div class="col-md-3 pull-right hidden-xs hidden-sm">
   <p>More</p>
     <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li> 
        </ul>
   </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna tortor, tincidunt ac tristique sit amet, condimentum ut erat. Mauris sem mi, ultrices et hendrerit vitae, hendrerit non tortor. Aliquam erat volutpat. Morbi eget leo lorem, ut placerat nisl. Aenean auctor volutpat condimentum. Morbi adipiscing leo et felis faucibus suscipit nec at odio. Pellentesque convallis turpis non sapien facilisis quis volutpat magna venenatis. Etiam nisi metus, imperdiet vitae lobortis sit amet, pharetra ut leo.</p>  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent magna tortor, tincidunt ac tristique sit amet, condimentum ut erat. Mauris sem mi, ultrices et hendrerit vitae, hendrerit non tortor. Aliquam erat volutpat. Morbi eget leo lorem, ut placerat nisl. Aenean auctor volutpat condimentum. Morbi adipiscing leo et felis faucibus suscipit nec ase quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

 <div class="col-md-3 visible-xs visible-sm">
 <p>More</p>
 <ul>
   <li>Link 1</li>
   <li>Link 2</li>
   <li>Link 3</li>
 </ul>
  </div>
  </div>
 </div>
</div>