How to setup responsive-sm

1

Hi,

What is the best way to change the class responsive-sm to responsive-md or responsive-lg?

I would like to have one column layout for smartfone and two columns layout for tablet. Should I use javascript?

ol3j

2

Well the responsive breakpoints actually take care of that for you. You can have a two column layout for tablet then with the breakpoint class applied, it will switch over to a one column layout.

3

Thanks. So… when should I use the responsive-md or responsive-lg? Is it important?

4

I’m not sure I understand what you mean when? If you mean, what cases should you use the breakpoint? That depends on your content really. In a real-life case, you would want to make your own breakpoint based on how your content is sized.

5

On smartfon I can use responsive-sm (One column for portrait and two columns for landscape) It works very well.
If I run app on tablet, What should I use? I have to change responsive-sm to responsive-md?
The responsive-sm not works on tablet.
I would like to have:
smartfon - One column for portrait and two columns for landscape.
tablet - One column for portrait and two columns for landscape.

6

Alright, well for that, you can write your own media queries based on device orientation.
Like this

@media screen and (orientation:portrait) {
   .myBP{
      -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
   }
}

What this does is change the flow of the flex box to be a 1 column layout when a device is in portrait. No need to worry about setting up landscape as the defaults will kick in for that.