bootstrap 5 grid layout col-md-6 not working correctly

user_8484746 0
Viewed 2305

I wanted the feature-list div on the next lint of image-computer but only at width 768px it doesn't go on the next line. For better understanding I have attached screenshot of desired result an actual result photo for reference. Please give me a better solution for this.

  body {
      background-image: url("images/bg-header-desktop.png");
      background-size: contain;
      background-repeat: no-repeat;
      font-size: 18px;
      font-family: 'Bai Jamjuree', sans-serif;
      padding: 9% 0 0 0;
      line-height: 1.5;
      margin: 0;
    }

    p {
      color: hsl(201, 11%, 66%);
    }

    h1,
    h3,
    h5,
    h2 {
      color: hsl(210, 10%, 33%);
      font-weight: 600;
    }

    button {
      margin-top: 1.25rem;
    }

    .btn-ios {
      border: 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 100;
      padding: 10px 35px;
      background-color: #26BAA4;
      -webkit-box-shadow: -1px 7px 15px -3px #35D9BD;
      -moz-box-shadow: -1px 7px 15px -3px #35D9BD;
      box-shadow: -1px 7px 15px -3px #35D9BD;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      text-align: center;
    }

    .btn-ios:hover {
      background: #35D9BD;
      border: solid #35D9BD 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      text-decoration: none;
    }

    .btn-mac {
      border: 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 100;
      padding: 10px 35px;
      background-color: #6173FF;
      -webkit-box-shadow: -1px 7px 15px -3px #7585FC;
      -moz-box-shadow: -1px 7px 15px -3px #7585FC;
      box-shadow: -1px 7px 15px -3px #7585FC;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      text-align: center;
    }

    .btn-mac:hover {
      background: #7585FC;
      border: solid #7585FC 0;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 25px;
      text-decoration: none;
    }

    .ios {
      text-align: right;
    }

    .mac {
      text-align: left;
    }

    .snippets {
      margin-top: 5rem;
    }

    footer {
      background-color: #f2f2f2;
      margin-top: 5rem;
      padding: 0 10%;
    }

    /* title */
    #title {
      text-align: center;
    }

    .para {
      padding: 1% 24%;
    }

    .logo {
      margin-bottom: 2.75rem;
    }

    /* features */

    #features {
      margin-top: 4rem;
    }

    .feature-list {
      padding-left: 1rem;
      padding-right: 17%;
    }

    .feature-list-div {

    }

    .center-feature {
      text-align: center;
    }

    .clipboard {
      margin-top: 8rem;
    }

    .image-computer {
      position: relative;
      right: 30px;
      width: 93%;
    }

    .image-devices {
      margin: 6rem auto 0 auto;
      display: block;
      width: 80%;
    }

    .feature-second {
      text-align: center;
      padding: 3% 10% 10% 10%;
    }

    .sponsers {
      text-align: center;
      padding: 0 10% 10% 10%;
    }

    /* cta */
    #cta {
      text-align: center;
    }

    /* footer */

    .footer-logo {
      width: 45%;
    }

    .footer-row {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .link {
      text-decoration: none;
      color: hsl(210, 10%, 33%);
    }

    .link:hover {
      color: hsl(171, 66%, 44%);
    }

    .first-footer {
      margin-bottom: 1.2rem;
      display: block;
    }

    .social-icon {
      text-align: right;
      padding-top: 2rem;
    }

    .fb-icon:hover,
    .twitter-icon:hover,
    .insta-icon:hover {
      color: hsl(171, 66%, 44%);
    }

    .fb-icon {
      margin-right: 1rem;
    }

    .twitter-icon {
      margin-right: 1rem;
    }

    .attribution {
      font-size: 11px;
      text-align: center;
      margin-bottom: 0;
      position: relative;
      bottom: 5px;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }

    @media (max-width: 970px) {
      .feature-list{
        padding-right: 10%;
      }
    }

    @media (max-width: 768px) {
      .feature-list{
        text-align: center;
      }
      .image-computer{
        text-align: center;
        display: block;
        position: static;
        margin: auto;
        width: 100%;
      }
    }

    @media (max-width: 376px) {

      body {
        padding: 25% 12% 0 12%;
      }

      .para {
        padding: 1rem 0 0 0;
      }

      .ios {
        text-align: center;
      }

      .mac {
        text-align: center;
      }
    }
<body>

  <section id="title">

    <img class="logo" src="images/logo.svg" alt="logo">
    <h1 class="heading">A history of everything you copy</h1>
    <p class="para">Clipboard allows you to track and organize everything you copy. Instantly access your clipboard on all your devices.</p>

    <div class="container-fluid">
      <div class="row">
        <div class="col ios">
          <button class="btn-ios" type="button" name="button">Download for iOS</button>
        </div>
        <div class="col mac">
          <button class="btn-mac" type="button" name="button">Download for Mac</button>
        </div>
      </div>
    </div>
    <h1 class="snippets">Keep track of your snippets</h1>
    <p class="para">Clipboard instantly stores any item you copy in the cloud,
      meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</p>
  </section>

  <section id="features">
    <div class="container-fluid">
      <div class="row imac g-0">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
          <img class="image-computer" src="images/image-computer.png" alt="image-computer">
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 feature-list">
          <div class="feature-list-div">
            <h3>Quick Search</h3>
            <p>Easily search your snippets by content, category, web address, application, and more.</p>
            <h3>iCloud Sync</h3>
            <p>Instantly saves and syncs snippets across all your devices.</p>
            <h3>Complete History</h3>
            <p>Retrieve any snippets from the first moment you started using the app.</p>
          </div>
        </div>
      </div>
    </div>
    <h1 class="center-feature clipboard">Access Clipboard anywhere</h1>
    <p class="center-feature para">Whether you’re on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.</p>
    <img class="image-devices" src="images/image-devices.png" alt="image-devices">
    <h3 class="center-feature">Supercharge your workflow</h3>
    <p class="center-feature para">We’ve got the tools to boost your productivity.</p>
    <div class="container-fluid feature-second">
      <div class="row">
        <div class="col">
          <img class="icon-feature" src="images/icon-blacklist.svg" alt="icon-blacklist">
          <h5>Create blacklists</h5>
          <p>Ensure sensitive information never makes its way to your clipboard by excluding certain sources.</p>
        </div>
        <div class="col">
          <img class="icon-feature" src="images/icon-text.svg" alt="icon-text">
          <h5>Plain text snippets</h5>
          <p>Remove unwanted formatting from copied text for a consistent look.</p>
        </div>
        <div class="col">
          <img class="icon-feature" src="images/icon-preview.svg" alt="icon-preview">
          <h5>Sneak preview</h5>
          <p>Quick preview of all snippets on your Clipboard for easy access.</p>
        </div>
      </div>
    </div>
  </section>

  <div class="container-fluid sponsers">
    <div class="row">
      <div class="col-sm">
        <img class="google" src="images/logo-google.png" alt="logo-google">
      </div>
      <div class="col-sm">
        <img class="ibm" src="images/logo-ibm.png" alt="logo-ibm">
      </div>
      <div class="col-sm">
        <img class="microsoft" src="images/logo-microsoft.png" alt="logo-microsoft">
      </div>
      <div class="col-sm">
        <img class="hp" src="images/logo-hp.png" alt="logo-hp">
      </div>
      <div class="col-sm">
        <img class="vector-graphics" src="images/logo-vector-graphics.png" alt="logo-vector-graphics">
      </div>
    </div>
  </div>

  <section id="cta">
    <h2>Clipboard for iOS and Mac OS</h2>
    <p class="para">Available for free on the App Store. Download for Mac or iOS, sync with iCloud and you’re ready to start adding to your clipboard.</p>
    <div class="container-fluid">
      <div class="row">
        <div class="col ios">
          <button class="btn-ios" type="button" name="button">Download for iOS</button>
        </div>
        <div class="col mac">
          <button class="btn-mac" type="button" name="button">Download for Mac</button>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div class="container-fluid">
      <div class="row footer-row">
        <div class="col">
          <img class="footer-logo" src="images/logo.svg" alt="logo">
        </div>
        <div class="col">
          <a class="first-footer link" href="#">FAQs</a>
          <a class="link" href="#">Contact Us</a>
        </div>
        <div class="col">
          <a class="first-footer link" href="#">Privacy Policy</a>
          <a class="link" href="#">Press Kit</a>
        </div>
        <div class="col">
          <a class="link" href="#">Install Guide</a>
        </div>
        <div class="col social-icon">
          <i class="fab fa-facebook-square fb-icon fa-2x"></i>
          <i class="fab fa-twitter twitter-icon fa-2x"></i>
          <i class="fab fa-instagram insta-icon fa-2x"></i>
        </div>
      </div>
    </div>

    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://mohak-goel.github.io/CSS---My-Site/">Mohak Goel</a>.
    </p>
  </footer>
</body>

this is actual result screenshot actual screenshot screenshot

this is desired result screenshot

desired result screenshot

twitter-bootstrap css html
1 Answers

If you want your columns on smaller displays to be the full width of the display, use col-12 without a size. Then pick your width to switch to two columns half the width of the display and add the appropriate class as in col-md-6. That will give you one full width column from a smartphone up to a tablet (767px wide). On anything larger (more than 767px wide), you would have two columns, each half the display width.

  <div class="container-fluid">
    <div class="row imac g-0">
      <div class="col-12 col-md-6">
        <img class="image-computer" src="images/image-computer.png" alt="image-computer">
      </div>
      <div class="col-12 col-md-6 feature-list">
        <div class="feature-list-div">
          <h3>Quick Search</h3>
          <p>Easily search your snippets by content, category, web address, application, and more.</p>
          <h3>iCloud Sync</h3>
          <p>Instantly saves and syncs snippets across all your devices.</p>
          <h3>Complete History</h3>
          <p>Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>
    </div>
  </div>

If you want your columns on smaller displays to be side-by-side and one column on wider (768px or more) displays, then you could use col-6 col-md-12

<div class="container-fluid">
    <div class="row imac g-0">
      <div class="col-6 col-md-12">
        <img class="image-computer" src="images/image-computer.png" alt="image-computer">
      </div>
      <div class="col-6 col-md-12 feature-list">
        <div class="feature-list-div">
          <h3>Quick Search</h3>
          <p>Easily search your snippets by content, category, web address, application, and more.</p>
          <h3>iCloud Sync</h3>
          <p>Instantly saves and syncs snippets across all your devices.</p>
          <h3>Complete History</h3>
          <p>Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>
    </div>
  </div>
user_10119840
Related