CODEWITHSUNDEEP
htmlcssflexbox
twan
twan

Reputation: 2659

How can I stack two elements under each other only on mobile using flexbox

I am trying to figure out flexbox but just stacking two elements is giving me a hard time.

How can I stack these elements only on mobile?

<div class="col-sm-6 col-12 d-flex justify-content-end">
  <!-- Right side -->
  <div class="d-flex">
    <p class="mb-0 align-self-center">© 2019 Alle rechten voorbehouden - Test</p>
    <img class="snmlogo align-self-center" src="images/snm-logo-white.png" alt="altimage">
  </div>
  <!--/ Right side -->
</div>

I am talking about the <p> and the <img> elements. On desktop they need to be shown next to eachother which works fine. I put them to the right in the footer using justify-content-end. On mobile I tried giving both elements display-block and width:100%, but this does not change anything.

How can I keep them like this on desktop, but stack them on mobile?

Upvotes: 0

Views: 1691

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

Change the direction of the flex container on small screen.

flex-column will set a column direction by default that you override on higher breakpoint (bigger screen)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>

Or you can define the flex container only on bigger screen:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-md-flex align-items-center justify-content-center text-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>

Upvotes: 2

Related Questions