media queries and bootstrap 4 issue

[soguazu]

Is it possible to add bootstap 4 class in media queries, like for example

.col-sm-3 { 
      order: flex-start;
}
. col-sm-9 {
    order: flex-end;
}


Or

. col-sm-9 {
    push: push-sm-3;
} 

. col-sm-3 {
    pull: pull-sm-9;
}

If it’s possible, please let me know how with this examples. Thanks so much in advance.

[Atelierbram]

Help us help you: could you start a demo for this?

Something in the code above makes me suspect there is confusing and misunderstanding on the fundamentals of CSS and how to use frameworks to your advantage. If so, you will need to read up on this and practice: no amount of asking questions on forums can be a substitute for the effort of learning and discovering for yourself.

The last two style declarations aren’t valid CSS syntax anyway, so I don’t know how to move on from here unless there is the beginnings of a demo.

[Atelierbram]

Help us help you: could you start a demo for this?

Something in the code above makes me suspect there is confusing and misunderstanding on the fundamentals of CSS and how to use frameworks to your advantage. If so, you will need to read up on this and practice: no amount of asking questions on forums can be a substitute for the effort of learning and discovering for yourself.

The last two style declarations aren’t valid CSS syntax anyway, so I don’t know how to move on from here unless there is the beginnings of a demo.

[soguazu]

thank you @ Atelierbram, i know that they are not valid css code. i was asking if it is possible to use bootstrap 4 classes right inside the media queries .

please check the link below—–here is what i want to achieve
https://codepen.io/deareststanley/pen/pwrBQz

the problem am having is right inside the media queries. i want the display to change when it is opened on a small device. i want the text to move to one side and the icon font to the other side parallel.

[Atelierbram]

So you want the same layout for smaller screens as it is now for larger screens?

[soguazu]

thank you sir for your time, i kinda fixed it using flexbox in media queries. if you try and close your browser a to mobile view you will see the icons running away from the content

[Atelierbram]

So did or did you not fix it? I don’t see any change in the demo … also still:

So you want the same layout for smaller screens as it is now for larger screens?

[rkieru]

I guess where I am confused is that the Bootstrap grid system already has robust support for responsive design. You can combine Grid sizes to declare how large an area should be based on screen size. For example:

Foo

The same goes for push-*-*. It only applies when the appropriate screen size is present, so there should be no need to try and override these in an additional media query…

[Author]

Posts