Sorting Bootstrap Columns

Question

Sorting Bootstrap Columns

Struggling to rearrange the bootstrap columns with helpful links in a row alongside an empty div and Lorem Ipsum text that spans 12 columns. I have attempted using clearfix and different column sizes, but none of them seem to be effective.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <!--Links-->
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-4 col-md-offset-0">
      <h2>Useful Links</h2>
      <ul>
        <li><a href="#">Link 1 Title</a></li>
        <li><a href="#">Link 2 Title</a></li>
        <li><a href="#">Link 3 Title</a></li>
        <li><a href="#">Link 4 Title</a></li>
      </ul>   
    </div>
    <!--Links close-->
    
    <div class="clearfix"></div>
    
    <!--Content-->
    <div id="content-right" class="col-xs-10 col-sm-10 col-md-12 col-md-push-0">
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  
    </div>
    <!--Content close-->
    
    <!--Twitter-->
    <div id="content-left" class="col-xs-10 col-sm-10 col-md-6 col-md-pull-6">
      <h2>Twitter</h2>
    </div> 
    <!--Twitter close-->

  </div><!-- row close -->
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Both the blocks with IDs links and twitter have been assigned the same ID content-left, which is incorrect. IDs should be unique.
To resolve this issue, you can enclose links and content within an additional block and use negative margins on the content.

Note: This solution is effective as long as the height of the twitter block does not exceed the height of the links block.

Please review the following code snippet:

#block-links   { background-color: #9fc; }
#block-content { background-color: #ff9; }
#block-twitter { background-color: #fc9; }

@media (min-width: 992px) {
  #block-content {
    margin-right: -200%;
    width: 300% !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <!-- Additional block -->
    <div class="col-xs-10 col-md-4">
      <div class="row">

        <!--Links-->
        <div id="block-links" class="col-xs-12">
          <h2>Useful Links</h2>
          <ul>
            <li><a href="#">Link 1 Title</a></li>
            <li><a href="#">Link 2 Title</a></li>
            <li><a href="#">Link 3 Title</a></li>
            <li><a href="#">Link 4 Title</a></li>
          </ul>   
        </div>
        
        <!--Content-->
        <div id="block-content" class="col-xs-12">
          <h2>Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  
        </div>
    
      </div>
    </div>
    
    <!--Twitter-->
    <div id="block-twitter" class="col-xs-10 col-md-6 col-md-offset-2">
      <h2>Twitter</h2>
    </div> 

  </div>
</div>

Answer 2

Both the blocks with IDs links and twitter have been assigned the same ID content-left, which is incorrect. IDs should be unique.
To resolve this issue, you can enclose links and content within an additional block and use negative margins on the content.

Note: This solution is effective as long as the height of the twitter block does not exceed the height of the links block.

Please review the following code snippet:

#block-links   { background-color: #9fc; }
#block-content { background-color: #ff9; }
#block-twitter { background-color: #fc9; }

@media (min-width: 992px) {
  #block-content {
    margin-right: -200%;
    width: 300% !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <!-- Additional block -->
    <div class="col-xs-10 col-md-4">
      <div class="row">

        <!--Links-->
        <div id="block-links" class="col-xs-12">
          <h2>Useful Links</h2>
          <ul>
            <li><a href="#">Link 1 Title</a></li>
            <li><a href="#">Link 2 Title</a></li>
            <li><a href="#">Link 3 Title</a></li>
            <li><a href="#">Link 4 Title</a></li>
          </ul>   
        </div>
        
        <!--Content-->
        <div id="block-content" class="col-xs-12">
          <h2>Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>  
        </div>
    
      </div>
    </div>
    
    <!--Twitter-->
    <div id="block-twitter" class="col-xs-10 col-md-6 col-md-offset-2">
      <h2>Twitter</h2>
    </div> 

  </div>
</div>

Answer 3

Answer №2

One way to effectively manage this issue is by using the pull and push technique. However, it's important to note that this method only works within the same row as it assigns the left and right properties without creating a new row. A workaround that I often employ involves duplicating the Twitter div section like this:

<div class="col-md-6 col-sm-12">
  <!-- Links -->
</div>
<div class="col-md-6 hidden-sm hidden-xs">
  <!-- Twitter -->
</div>
<div class="col-sm-12">
  <!-- Content -->
</div>
<div class="col-sm-12 hidden-md hidden-lg">
  <!-- Twitter -->
</div>

Answer 4

One way to effectively manage this issue is by using the pull and push technique. However, it's important to note that this method only works within the same row as it assigns the left and right properties without creating a new row. A workaround that I often employ involves duplicating the Twitter div section like this:

<div class="col-md-6 col-sm-12">
  <!-- Links -->
</div>
<div class="col-md-6 hidden-sm hidden-xs">
  <!-- Twitter -->
</div>
<div class="col-sm-12">
  <!-- Content -->
</div>
<div class="col-sm-12 hidden-md hidden-lg">
  <!-- Twitter -->
</div>

Sorting Bootstrap Columns

Answer №1

Answer №2

Similar questions

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Responsive Bootstrap 4 columns

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

Navigation menu with collapsible horizontal sub-menu display toggle

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

Define the iframe height as "100% minus X pixels"

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

A guide to accessing and managing events for the child inside a div element using extjs4

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

Targeting HTML tags, styling names, and class names using CSS

Child absolute div is getting cropped due to overflow auto of parent absolute div

The horizontal display list is experiencing issues when using the display inline property

Upon clicking the collapse button, the collapsed element briefly appears before its height value is reset to empty in the element's style

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Phonegap's JavaScript canvas feature is experiencing issues

HTML automatically removes added elements

Is one round the limit for my JavaScript image slider?

Setting CSS attributes based on the parent node: What you need to know

Issues with Windows font rendering when using @font-face in CSS

What could be the reason behind the occurrence of an error after deleting certain lines of code