Question

我需要对齐剖面信息，如图所示。这是桌面视图：

以下是移动视图，“标题”标题“欢迎”应移至移动视图中该行的顶部，如图所示

但是在我的程序中，它会像通常预期的那样坚持段落，并在图像下面。

注意：图像显示是我想要的输出，我没有得到。我对CSS有点新，我需要解决这个问题。这是我的代码

.col-centered {
   text-align: left;
   padding-top: 10px;
   padding-bottom: 10px;    
 
}

<div class="row">
                <div class="col-sm-5 col-centered">
                        <img class="img-responsive" src="./Assets/Welcome_image.png" alt="WelcomeImage" />
                </div>

                <section class="col-sm-7 col-centered">
                    <h2 id="textheading">Welcome</h2>
                                    <p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
                    <p><mark> Read More </mark></p>

                </section>
            </div>

            <div class="row">
                <div class="col-sm-5 col-centered">
                    <img class="img-responsive" src="./Assets/AboutusImage.png" alt="AboutUsImage" />
                </div>
                <section class="col-sm-7 col-centered">
                    <h2 id="textheading">About Us</h2>
                    <p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
                    <p><mark> Read More </mark></p>
                </section>
            </div>

Answer 1

<强>更新

现在，有了新信息，您需要使用helper classes to Show/Hide elements

我根据视口的宽度创建了一个重复的h2元素来显示/隐藏，并将其放在图像的顶部。像这样：

  <div class="visible-xs-block col-xs-6 col-xs-offset-3">
    <h2 id="textheading">Welcome</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">

    <h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">Welcome</h2>

    ...
  </section>

我还删除了对col-centered的需求，并根据需要使用了col-xs-offset-#。

如果这不起作用，请告诉我们。）

查看更新的演示：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="visible-xs-block col-xs-6 col-xs-offset-3">
    <h2 id="textheading">Welcome</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
    <h2 id="textheading" class="hidden-xs">Welcome</h2>
    <p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging
      the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
    <p><mark> Read More </mark></p>

  </section>
</div>

<div class="row">
  <div class="hidden-sm hidden-md hidden-lg col-xs-6 col-xs-offset-3">
    <h2 id="textheading">About Us</h2>
  </div>

  <div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
    <img class="img-responsive" src="http://lorempixel.com/300/300" alt="AboutUsImage" />
  </div>

  <section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
    <h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">About Us</h2>
    <p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and
      test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
    <p><mark> Read More </mark></p>
  </section>
</div>

＆＃13;

澄清后删除旧答案

将特定列元素移动到引导程序中行的顶部

1 个答案: