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

Вы можете попробовать следующий код. «.hidden-xs» и «.hidden-sm» использовать, чтобы скрыть элемент на соответствующих экранах. и ".visible-xs" и ".visible-sm" для отображения на соответствующих экранах.

<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>