How to handle columns/rows for mobile?

I try to make some layouts but getting stuck with small devices. How to handle stuff like that in best practice?

Now i have in my App Structure the following Layoutlogic:

layout

On Big Screen ok:

Small is ugly:
With which technique i can do smth? Years ago i used float, left, right, both etc. But I guess thats the wrong way. I guess I can make smaller borders/decrease paddings/margins, but is that the way you go?

What I use now is for a ROW i have 12 units in Layout (Size).
So i go never more than 12 correct?.

For Example: ROW X

  • Column A has : 4
  • Column B has : 8

or:

  • Column A has : 3
  • Column B has : 9

So as I can define columns for each Device Screen for ex. Mobile I define Layout size: 12. Is that right? So small screens break my columns and its fitting the screen?
small-screens-columns-12

Freddy,

Bootstrap is mobile first, meaning that if you specify col it will automatically span the full 12 columns of the grid.

As an example, if you have class="col col-md-6", the result will be
xs - 12 cols (phone)
sm - 12 cols (landscape phone)
md - 6 cols (tablet)
lg - 6 cols (laptop)
xl - 6 cols (desktop)

I hope that this explains it.

1 Like