0

I've been trying for hours to setup the following layout with html and css (and Bootstrap, if needed):

Desired layout

That is:

  • For desktop, the card (or whatever element) should be floating on the right
  • For mobile, the card should be positioned below the text

The problem with using just float: right is that the floating element should be positioned in the html before the text, but in mobile the element will be displayed on the top of the text, and I wanted it at the bottom.

Surprisingly, I was not able to find any existing question (maybe I just did not use the proper keywords). The most similar question I found was CSS floats, change order on mobile layout?, but it is not really the same problem.

The first idea I had to solve it was to just use Bootstrap's column system, but if the height of the text element is larger than the floating element, it will stay in the same column and not continue below the floating element.

I eventually found a solution (which I will post as an answer), but since it took me so long to figure it out, I thought I will create a question anyway to save time to others that face the same issue. Plus probably somebody will propose a better solution than mine.

J0ANMM
  • 7,849
  • 10
  • 56
  • 90

1 Answers1

0

The solution that eventually worked for me combined:

.card-read-more {
  max-width: 40%;
  float: right;
  padding: 10px;
  border: 1px solid black;
  margin-left: 10px;
}

@media only screen and (max-width: 400px) {
  .read-more-container {
    display: flex !important;
    flex-direction: column;
  }
  .card-read-more {
    order: 2;
    max-width: 100%;
    float: none;
  }
}
<div class="read-more-container">
  <div class="card-read-more">
    My card or image or whatever content.
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
J0ANMM
  • 7,849
  • 10
  • 56
  • 90