Question

使用Bootstrap 4，我有一个<container>，其中有两列。

在boostrap 4 breakpoints md-xl 范围内的屏幕尺寸上，它们被排列在两个相等大小的列中：col-md-6，并在 sm-xs 屏幕：col-xs-12。

我想在 md 屏幕上将蓝色img移到红色img上（因此从一个col移到另一个-参见下图）。我玩过一些JavaScript和Node.insertBefore()，但如果可能的话，最好使用Bootsrap4 CSS。

以下是我使用一些补救性javascript进行的首次尝试-有人可以指出正确的方向吗？

function movelogo() {
    var logo = document.getElementById('logo');
    logo.insertBefore(logo, 'next_col');
}


window.addEventListener('resize', movelogo);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
    <meta http-equiv="content-type" content="text/html"/>
    <title>Title</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

        <div class="col-xs-12 col-md-6">

            <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block"
                 id="logo" alt="Logo">

            <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione
                stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed
                timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis
                conmunitam.</p>

            <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut
                vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare
                possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum
                officiorumque iucundius.</p>
        </div>

        <div class="col-xs-12 col-md-6" id="next_col">
            <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image"
                 class="mx-auto d-block img-fluid">
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>
</html>

Answer 1

这是使用Media Queries with JavaScript在简单JS中完成此操作的一种方法，而无需更改HTML，只需在徽标div中添加id="current_col"。

（我将sm-6放在了窥探器的波纹管中，以便您直接在此处查看结果）

function resize(x) {
  if (x.matches) { // If media query matches
    document.getElementById('next_col').prepend(
      document.getElementById('logo')
    );
  } else {
    if ($("#next_col").children("#logo").length > 0) {
      document.getElementById('current_col').prepend(
        document.getElementById('logo')
      );
    }
  }
}

var x = window.matchMedia("(max-width: 960px)")
resize(x) // Call listener function at run time
x.addListener(resize) // Attach listener function on state changes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

  <div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

      <div class="col-xs-12 col-sm-6" id="current_col">

        <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block" id="logo" alt="Logo">

        <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite
          per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
        </p>

        <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
          remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
      </div>

      <div class="col-xs-12 col-sm-6" id="next_col">
        <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image" class="mx-auto d-block img-fluid">
      </div>
    </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

您可以在这里进行测试： https://jsfiddle.net/748sormv/

Answer 2

有几个问题...

instanceof是不是节点的字符串。
使用next_col试图将logo.insertBefore(logo, 'next_col');插入之前的logo中，徽标中不存在OFC。

”以下代码尝试将徽标移动到任何屏幕尺寸（并且会担心稍后再检测屏幕尺寸。”

这意味着每次触发窗口调整大小事件时，它将尝试insertBefore，这很可能会使浏览器崩溃。您需要一些测试条件，并解决其他问题。...

next_col

https://www.codeply.com/go/G8zYKzmnZf

但是，由于Bootstrap具有响应能力并且可以用来更改xs和sm屏幕宽度的布局，因此实际上没有理由使用JS：https://www.codeply.com/go/rh6PfIucow

Answer 3

这是一个解决方案；您必须先查看完整尺寸，然后将窗口调整为480px以下才能看到结果。我提供了媒体查询来解决您的问题。我还在您的HTML中创建了两个新的包含div的bluecol和redcol。

bluecol div包围蓝色图像及其文本。 float:left在媒体查询中，用于文本div，以使其在调整大小时向左对齐。最初，我将文本div放在代码中的图像之后，但是随后文本首先显示在较大的屏幕上。我删除了一些内联引导CSS，并添加了一些新创建的（短）自定义类以实现最终结果。

希望这对您有所帮助。

h1 {
  text-align: center;
  padding: 10px;
}

#abouttxt {
  font-weight: normal;
  font-size: 10pt;
  line-height:1.4em;
  margin-top:12px;
  
}

#logo {
  width: 60%;
  margin: 0 20%;
}

#abouttxt,
#logo {
  display: inline-block;
}


.red {
  width: 80%;
  margin: 0 10%;
}

#bluecol,
#redcol {
  display: block;
}

@media only screen and (min-width:480px) {
  #abouttxt {
    max-width: 50%;
    font-weight: normal;
    font-size: 10pt;
    float: left;
  }
  #logo {
    max-width: 40%;
    margin: 5px 10px;
  }
  #abouttxt,
  #logo {
    display: inline-block;
    vertical-align: top;
  }
  .red {
    width: 40%;
    margin-left: 52%;
  }
  #bluecol,
  #redcol {
    display: inline-block;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

  <div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

      <div id="bluecol" class="col-xs-12 col-md-6">

        <img id="logo" alt="Logo" src="https://via.placeholder.com/300/0000FF/808080?text=Logo" />
        <section id="abouttxt">
          <p class="btext">Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium,
            milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
          </p>

          <p class="btext"> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
            remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
        </section>


      </div>

      <div id="redcol" class="col-xs-12 col-md-6">
        <img class="red" class="mx-auto" src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image">
      </div>

    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

将img移至断点上的其他引导col

3 个答案: