Home Bootstrap4: Displaying 3 columns in two rows on narrow screens

# Bootstrap4: Displaying 3 columns in two rows on narrow screens

Udi
1#
Udi Published in 2018-02-14 08:53:26Z
 I would like to create a pagination component that would look like this: On a wide screen: | | | [<<] Page # 1 of 6 [>>] | | |  On a narrow screen: | | | Page # 1 of 6 | | [<<] [>>] | | |  I have tried the following: 
blah blah blah [B]
««« [A]
»»» [C]
 Codepen: https://codepen.io/nonZero/pen/XZaxBR But on a narrow screen I get this instead: | | | Page # 1 of 6 | | [<<] | | [>>] | | |  (Edit: fixed xs-12 and xs-6 were mixed in the original post, but the question is still open.)
WebDevBooster
2#
WebDevBooster Reply to 2018-02-14 10:03:21Z
 There are NO col-xs-* classes in Bootstrap 4 (anymore). They have been replaced with just col-*: 
blah blah blah [B]
««« [A]
»»» [C]
 (Notice: text-left is unnecessary because that's the default.) Also, the use of the order-first class allows to do away with the order-1 and order-2 classes.
Shahil M
3#
Shahil M Reply to 2018-02-14 09:34:12Z
 Updated - col-xs-* have been dropped in Bootstrap 4. Use col-* instead. 
blah blah blah [B]
««« [A]
»»» [C]
 Demo : https://codepen.io/anon/pen/PQKxOZ
 You need to login account before you can post.
Processed in 0.324147 second(s) , Gzip On .