Voglio impilare due div (inizialmente fianco a fianco con il testo allineato a sinistra, allineato a destra rispettivamente in ogni div per iniziare con).
Quando ridurrò il viewport più piccolo della dimensione di ogni div, voglio impilare entrambi i div con testo allineato a sinistra (stesso allineamento l'uno rispetto all'altro in ciascun div).
Come posso ottenere questo effetto?
HTML
<div class="footer">
<div class="row text">
<div class="col-sm-6">
<span class="label">Email us:</span><a class="active normal" href="mailto:email@server.com">email@server.com</a>
</div>
<div class="col-sm-6">
<span class="label">Call us:</span><a class="active normal">1-888-888-8888</a>
</div>
</div>
</div>
CSS - Sass
div.footer
padding-top: 15px
padding-left: 40px
background: #eeeeee
height: 60px
div.footer div.left
padding-left: 15px
div.footer div.right
margin-right: 40px
risposte:
0 per risposta № 1La soluzione era utilizzare le query multimediali e creareil display: block e width: 100% (dal blocco inline e larghezza 50% inizialmente) quando il viewport è diventato troppo piccolo. Ho anche modificato le classi div html per includere col-sm-6 e col-md6 per ognuna delle div side-by-side.
CSS
div.footer
display: block
padding-top: 15px
padding-bottom: 15px
padding-left: 40px
background: #eeeeee none
height: auto
div.footer div.left
padding-left: 15px
div.justify
width: 100%
div.justify div
width: 50%
display: inline-block
div.row.justify div:last-child
text-align: right !important
@media screen and (max-width: 500px)
div.justify div
display: block
width: 100%
div.row.justify div:last-child
text-align: left !important
HTML
<div class="footer">
<div class="row justify text">
<div class="col-sm-6 col-md-6">
<span class="label">Email us:</span><a class="active normal" href="mailto:email@server.com">email@server.com</a>
</div>
<div class="col-sm-6 col-md-6">
<span class="label">Call us:</span><a class="active normal">1-888-888-8888</a>
</div>
</div>
</div>