如何使用推拉来改变小屏幕尺寸的3个自举列的顺序？

Question

我使用bootstrap

有3列

<div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-5">2</div>
   <div class="col-md-4">3</div>
</div>

它们看起来像中等大小：

我希望它们在小尺寸和小尺寸下显示如下：

我尝试使用pull and push

<div class="row">
    <div class="col-md-3">1</div>
    <div class="col-md-5 col-sm-push-4">2</div>
    <div class="col-md-4 col-sm-pull-5">3</div>
</div>

但结果很小： 并且中等和大尺寸的订单不会改变

我的代码：https://www.w3schools.com/code/tryit.asp?filename=FFMTM73UDAWR

Answer 1

＆＃13;

＆＃13;

<div class="row">
  <div class="col=md-4">1</div>
  <div class="col=md-4">2</div>
  <div class="col=md-4">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

简单地移除push和pul bootstrap首先移动，如果没有指定 - grid将占用所有12列 所以通过为每个div指定col-md-4，告诉你使用col-sm-12和col-xs-12来实现更小的屏幕。

Answer 2

在这种情况下从手机开始

＆＃13;

＆＃13;

var auth2 = gapi.auth2.init({
  client_id: '',
  scope: 'https://www.googleapis.com/auth/youtube',
  fetch_basic_profile: false,
  cookie_policy: 'single_host_origin'
});


auth2.signIn({
  scope: 'https://www.googleapis.com/auth/youtube',
  prompt: 'select_account'
}).then(function(result) {
  console.log('Signed in!');
  console.log(result);
}, function(error) {
  console.log(error);
});

＆＃13;

＆＃13;

＆＃13;