html - 是否可以使用 css 使我的柱状 div 框响应较小的设备？或者我可以使用 Bootstrap 吗？

Question

我目前有一个 div 框，里面包含一行，在那一行中，有一堆 div 框。
使用 css 我目前使用 column-count 将 div 框拉伸(stretch)成 3 列。
我的问题是:

1) 我如何使它响应较小的设备

2) 我可以使用 bootstrap 来实现我想要的吗？

3) 是否有更有效或更好的方法来完成这项任务？

/* Location Section CSS*/
/* Large */
.location {
  background-color: #F05F40;
}

#locationCol {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

/* Medium screens */
@media (max-width: 800px) {
  .location {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around; 
  }

  #locationCol {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* Small screens */
@media (max-width: 500px) {
  .location {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }

  #locationCol {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

<!-- This is the Location section -->

    <section class="location" id="location">
        <!--
        <div class="container">
          <div class="row">
            <div class="col-lg-12 text-center">
              <h2 class="section-heading text-white">Location</h2>
              <hr class="primary">
            </div>
          </div>
        </div> -->
        <div class="container-fluid">
          <div id="locationCol">
            <div id="locationSection">
              <h2 class="text-center section-heading text-white">Location</h2>
              <hr class="light">
              <p class="text-faded">Corby is located in Northamptonshire and lies 14.5km (9 miles) north of the A14,
                which
                links the M1 and A1.
                The town is approximately 37km (23 miles) north-east of Northampton, 35km (22 miles) south-east of
                Leicester
                and 31km (20 miles) west of Peterborough.
                The east coast ports of Felixstowe and Harwich and the major conurbations of Manchester, Leeds, Bristol
                and
                London are all within three hours drive time.<br />
                <br />
                Corby has been included within the Government's Milton Keynes and South Midlands Sub-Regional strategy.
                According to government figures released in March 2010 Corby has the fastest growing population in the
                UK.
                Up to 2021 North Northamptonshire is estimated to grow its employment workforce by 47,400 jobs and, to
                absorb
                this growth in population, 16,800 new houses are due to be built in Corby over the same period.<br />
                <br />
                Corby has a population of 87,000 (2009 census) which is expected to rise by 1% per annum from 2009 to
                92,000
                by 2014. It’s significant industrial base attracts major companies to the town including Avon Cosmetics,
                Golden Wonder, British Steel Consumer Products,
                British and American Tobacco, Dixons, Electrolux 8 Morrisons.</p>
            </div>
            <div id="communicationsSection">
              <h2 class="text-center section-heading text-white">Communications</h2>
              <hr class="light">
              <p class="text-faded">Road - Corby has excellent road communications, with the A6 offering links to
                Leicester
                40km (24.8 miles) to the north west and the A43 connecting the town with Peterborough 40km (25 miles) to
                the
                north east and Northampton 36.5km (22.7 miles) / to the south west.
                The A43 also provides access to the A14 16km (10 miles) to the south. The A14 links to the M11 and
                Cambridge
                67.5km (42 miles) to the south east and the M1 46km (28.6 miles) to the West.
                The Corby Southern Relief Road, a £34 million project is now open.<br />
                <br />
                Rail - A new station in Corby, opened in April 2009, provides direct links to london St Pancras with a
                fastest journey time of 1 hour and 14 minutes.
              </p>
            </div>
            <div id="situationSection">
              <h2 class="text-center section-heading text-white">Situation</h2>
              <hr class="light">
              <p class="text-faded">The Property is situated on the nothern edge of Willowbrook East Industrial Estate,
                3.5km
                (2.2 miles) to the north of Corby town centre. <br />
                <br />
                The property is accessed directly from Shelton Road with the Rockingham Speedway Situated directly to the
                north. Shelton Road leads south to the A6116 Steel Road which runs east west (???) to Corby town centre
                and
                the A43 respectively.
                The ‘ Ink to the A1 approxrmately 22km (13.6 miles) to the north east. To the south east the A43 connects
                with the A14 at Kettering before joining the M1 at Junction 19.46 km (28.5 miles) from the property.<br />
                <br />
                The newly developed £8.3m Corby railway station is approximately 3.5km (2.2 miles) to the south-west ot
                the
                property.
                It has been estimated by the North Northants Development Company, that the opening of this rail service
                has
                the potential to unlock an estimated £200m of further commercial investment in the area. <br />
                <br />
                The property is adjacent to and south oi Rockingham Motor Speedway. There is currently a development
                Masterplan being prepared by North Northants Development company involving over 80.94ha (200 acres) of
                land
                for a high quality employment development centred on the speedway circuit.
                This proposal incorporates the property.<br />
                <br />
                The property is also a short distance from Priors Hall, which, at 400ha (988 acres), is one of the
                largest
                on-going developments in the country.
                Since gaining planning approval in 2007, significant development has taken place. The scheme will provide
                5,100 homes, three new schools, 200ha (494.2 acres) of parkland and employment initiatives designed to
                generate 3,000 jobs.</p>
            </div>
            <div id="mapSection">
              <h2 class="text-center section heading text-white">Map</h2>
              <hr class="light">
              <img id="corbymap" src="\img/location/corbymap.jpg">
            </div>
          </div>
        </div>
        </div>
      </section>

Answer 1

希望我明白你在问什么:

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4">
                <h2 class="text-center">Location</h2>
                <hr />
                <p>
                    Corby is located in Northamptonshire and lies 14.5km (9 miles) north of the A14, which
                    links the M1 and A1.
                    The town is approximately 37km (23 miles) north-east of Northampton, 35km (22 miles) south-east of
                    Leicester and 31km (20 miles) west of Peterborough.
                    The east coast ports of Felixstowe and Harwich and the major conurbations of Manchester, Leeds, Bristol
                    and London are all within three hours drive time.
                </p>
                <p> 
                    Corby has been included within the Government's Milton Keynes and South Midlands Sub-Regional strategy.
                    According to government figures released in March 2010 Corby has the fastest growing population in the
                    UK.
                    Up to 2021 North Northamptonshire is estimated to grow its employment workforce by 47,400 jobs and, to
                    absorb this growth in population, 16,800 new houses are due to be built in Corby over the same period.
                </p>
                <p>
                    Corby has a population of 87,000 (2009 census) which is expected to rise by 1% per annum from 2009 to
                    92,000 by 2014. It’s significant industrial base attracts major companies to the town including Avon Cosmetics,
                    Golden Wonder, British Steel Consumer Products, British and American Tobacco, Dixons, Electrolux 8 Morrisons.
                </p>
            </div> <!-- /col-sm-4 -->
            <div class="col-sm-4">
                <h2 class="text-center">Communications</h2>
                <hr />
                <p>
                    Road - Corby has excellent road communications, with the A6 offering links to
                    Leicester 40km (24.8 miles) to the north west and the A43 connecting the town with Peterborough 40km (25 miles) to
                    the north east and Northampton 36.5km (22.7 miles) / to the south west.
                    The A43 also provides access to the A14 16km (10 miles) to the south. The A14 links to the M11 and
                    Cambridge 67.5km (42 miles) to the south east and the M1 46km (28.6 miles) to the West.
                    The Corby Southern Relief Road, a £34 million project is now open.
                </p>
                <p>
                    Rail - A new station in Corby, opened in April 2009, provides direct links to london St Pancras with a
                    fastest journey time of 1 hour and 14 minutes.
                </p>
                <h2 class="text-center">Map</h2>
                <hr />
                <img id="corbymap" src="\img/location/corbymap.jpg" />
            </div> <!-- /col-sm-4 -->
            <div class="col-sm-4">
                <h2 class="text-center">Situation</h2>
                <hr />
                <p>
                    The Property is situated on the nothern edge of Willowbrook East Industrial Estate,
                    3.5km (2.2 miles) to the north of Corby town centre. 
                </p>
                <p>
                    The property is accessed directly from Shelton Road with the Rockingham Speedway Situated directly to the
                    north. Shelton Road leads south to the A6116 Steel Road which runs east west (???) to Corby town centre
                    and the A43 respectively.
                    The ‘ Ink to the A1 approxrmately 22km (13.6 miles) to the north east. To the south east the A43 connects
                    with the A14 at Kettering before joining the M1 at Junction 19.46 km (28.5 miles) from the property.
                </p>
                <p>
                    The newly developed £8.3m Corby railway station is approximately 3.5km (2.2 miles) to the south-west ot
                    the property.
                    It has been estimated by the North Northants Development Company, that the opening of this rail service
                    has the potential to unlock an estimated £200m of further commercial investment in the area. 
                </p>
                <p>
                    The property is adjacent to and south oi Rockingham Motor Speedway. There is currently a development
                    Masterplan being prepared by North Northants Development company involving over 80.94ha (200 acres) of
                    land for a high quality employment development centred on the speedway circuit.
                    This proposal incorporates the property.
                </p>
                <p>
                    The property is also a short distance from Priors Hall, which, at 400ha (988 acres), is one of the
                    largest on-going developments in the country.
                    Since gaining planning approval in 2007, significant development has taken place. The scheme will provide
                    5,100 homes, three new schools, 200ha (494.2 acres) of parkland and employment initiatives designed to
                    generate 3,000 jobs.
                </p>
            </div> <!-- /col-sm-4 -->
        </div><!-- /row -->
    </div><!-- /container-fluid -->
</section>

我使用了 Bootstrap 4 基本原则。从 here 开始祝你好运!