Переместить объект вниз при мобильной версии

Question

есть одна задача, при мобильной версии (при ширине 568px) объект <div class="item-two"><a href="">Переход на другую страницы</a></div> нужно переместить вниз

Как можно поправить данный код или при помощи css переместить вниз ссылку?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
  <div class="container__caption d-flex align-items-center">
    <div class="item-one"><h1>Заголовок</h1></div>  
    <div class="item-two"><a href="">Переход на другую страницы</a></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="item">текст</div></div>
    <div class="col-8"><div class="item">текст</div></div>
  </div>
</div>

Answer 1

Одно из решений такое:

.next-page_m {
    display: none;
}
.next-page_d {
    display: block;
}
@media screen and (max-width: 568px) {
.next-page_m {
    display: block;
}
.next-page_d {
    display: none;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
  <div class="container__caption d-flex align-items-center">
    <div class="item-one"><h1>Заголовок</h1></div>  
    <div class="item-two next-page_d"><a href="">Переход на другую страницы</a></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="item">текст</div></div>
    <div class="col-8"><div class="item">текст</div></div>
  </div>
  <div class="item-two next-page_m"><a href="">Переход на другую страницы</a></div>
</div>

БЛОГ НА HUSL

Переместить объект вниз при мобильной версии

Ответы (1 шт):