元素流问题，可能是Squarespace Quirk

Question

我的智慧结束了这个。我试图设计这个特定元素，以便在小屏幕（例如移动设备）上重新排列。在常规/更大的屏幕上，元素是并排的。但是在手机等上，它们会在彼此之下流动。相反，这些元素只是相互重叠并渗入页面页脚，完全不尊重其容器的边界。我尝试了许多不同的解决方案（比如在内联，内联块和块之间旋转显示属性并消除浮动属性），但似乎没有任何效果。我完全准备好把它归咎于Squarespace。

有人请帮忙。

这里是链接：Arcan: Title Page (Demo)

这是HTML：

    <div class='book-profile'> <!-- profile -->
  <div class='bprof-frame' style='width: 40%;'> <!-- frame -->
    <div class='bprof-left'> <!-- left container -->
      <img src='https://static1.squarespace.com/static/56365d8fe4b01da6f9449978/t/5abc0a40352f53d1860e1018/1487723572274/book-cover.jpg?format=500w'>
    </div> <!-- end left container -->
  </div> <!-- end frame -->
  <div class='bprof-frame' style='width: 60%;'> <!-- right frame -->
    <div class='bprof-right'> <!-- right container -->
      <div class='bp-rt-content active'>
        <h2>Available Now</h2>
        <h3>Digital + Paperback</h3>
        <a href='http://www.worldsofepoch.com/store?category=Arcan' class='bp-button' target='_blank'>Purchase</a><br>
        <p class='bp-ava'>
          Also available
        </p><br>
        <img            src='https://static1.squarespace.com/static/56365d8fe4b01da6f9449978/t/5abc0a40352f53d1860e101a/1522268546298/availability-brands.png?format=750w'>
      </div>
      <div class='bp-rt-content'>
        <h2>
          Reviews
        </h2>
        <!-- <h3>
          &#9733;&nbsp;&#9733;&nbsp;&#9733;&nbsp;&#9733;&nbsp;&#9733;
        </h3> -->
        <div class='bp-rev'>
          <ul>
            <li>"The story throws you into an endless ravine of mystery, suspense, action, and duty. I only wish I could fall faster." <span class='rev-auth'>—Danny T., <i>Amazon Customer</i></span></li>
            <li>"...While I'm HUGE on character development, I'm blown away at the world he's created (Terra)." <span class='rev-auth'>—Curiouser Editing</span></li>
            <li>"Brooks brings a refreshing take to the fantasy genre along with a new set of dynamic characters and lore to discover."<span class='rev-auth'>—Angela J. Ford, <i>The Four Worlds</i> Series</span></li>
          </ul>
        </div>
      </div>
      <div class='bp-rt-content'>
        <h2>
          The Long Night Comes
        </h2>
        <div class='bp-desc'>
          <span class='dropcaps'>T</span>he sun has begun to set on Terra, giving reign to the unholy Night foretold by the Verses. The <i>Exxarians</i> have returned to reap the destruction sown into the earth several millennia ago. But the object of their ruinous plot has eluded them in the form of a crafty soldier. Kyran, the last of the Arcans and bearer of the <i>Godfall</i>, finds himself on an unlikely journey, uncovering secrets about his primordial lineage. Such secrets, once realized, could mean the downfall of a calculated and genius scheme for the Exxarians. But, while Kyran endeavors to find his way, the Exxarians grow ever closer to the culmination of their apocalyptic design. He is the final piece.
        </div>
      </div>

    </div> <!-- end container -->
    <div class='bprof-nav'>
      <div class='bp-nav-content'>
        <ul>
            <li><a class='bp-nav-link active' onclick='currentSlide(1)'>Buy</a></li>
            <li><a class='bp-nav-link' onclick='currentSlide(2)'>Reviews</a></li>
          <li><a class='bp-nav-link' onclick='currentSlide(0)'>About</a></li>
      </ul>
      </div>

    </div>
  </div> <!-- end frame -->
</div> <!-- end profile -->

这里是CSS：

div.book-profile div{
    //background-color: rgba(255,0,0,0.25);
  } 
  .book-profile{
    width: 100%;
    //height: auto;
    //border: blue 2px solid; box-sizing: border-box;
  }
  .bprof-frame {
    //width:50%;
    //height: 768px //test
    display: block;
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    //border: purple 2px solid; box-sizing: border-box;
    //background-color: rgba(0,0,255,0.5);
  }
  .bprof-left{
    //height: auto;
    padding: 0;
    margin: 0;
    //border: green 2px solid; box-sizing: border-box;
  }
  .bprof-left img {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
  }
  .bprof-right{
    padding: 0;
    margin: 0;
    height: 90%;
    display: inline-block;
    //display: block;
    text-align: center;
    position: relative;
    //top: 0;
    //background-color: rgba(255,0,255,0.5);
    //border: red 2px solid; box-sizing: border-box;
  }
  .bp-rt-content {
    display: none;
    padding: 0;
    margin: 0;
    position: relative;
    top: -1em;
    //top: 50%;
    //transform: translateY(-50%);
    //background-color: rgba(255,0,0,0.5);
  }
  .bp-rt-content img{
    width: 75%;
    position: relative;
    bottom: 1em;
  }
  .bprof-nav{
    width: 100%;
    height: 10%;
    display: inline-block;
    //background-color: rgba(0,0,255,0.1) !important;
    padding: 0;
    margin: 0;
  }
  .bprof-nav ul{
    list-style-type: none;
    padding-left: 0;
    //font-family: 'Dosis';
    //font-size: smaller;
    //font-weight: 500;
    //text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 auto;
    display: inline-block;
    line-height: 1em;
  }
  .bprof-nav li{
    display: inline;
    line-height: 1em;
    margin: 0 10px;
  }
  .bp-nav-content {
    display: inline-block;
    //line-height: 1em;
    border-radius: 10px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .bp-nav-content a,
  .bp-nav-content a:visited{
    color: rgba(0,0,0,0.5);
    cursor: pointer;
  }
  .bp-nav-content a.active{
    color: black;
    cursor: text;
  }
  .bp-rt-content a,
  .bp-rt-content a:visited{
    color: black;
    background-color: rgba(0,0,0,0);
    display: inline-block;
    padding: 20px 30px;
    margin: 10% auto;
    border: black 2px solid;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-family: 'Dosis';
    //font-size: smaller;
  }
  .bp-rt-content a:hover,
  .bp-rt-content a:active{
    color: white;
    background-color: black;
  }
  .bp-rev {
    position: relative;
    //top: -1em;
  }
  .bp-rev ul{
    padding-left: 0;
    list-style-type: none;
    text-align: justify;
  }
  .bp-rev li{
    padding: 20px;
    border-radius: 5px;
    display: block;
    width: 80%;
    background: linear-gradient(white,white,rgba(255,255,255,0.5));
    margin: 0 auto 1em;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
  }
  .rev-auth {
    display: block;
    text-align: right;
    font-size: smaller;
    vertical-align: bottom;
    //line-height: 1em;
  }
  .bp-desc {
    padding: 10px;
    margin: 0 auto;
    width: 80%;
    height: 70%;
    overflow-y: scroll;
    text-align: justify;
  }
  .bp-ava {
    color: gray;
    background-color: rgba(255,255,255,0.75);
    font-size: small;
    //text-transform: uppercase;
    //font-family: 'Dosis';
    line-height: 1em;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
    display: inline-block;
    position: relative;
  }

这里是头脑中的Javascript：

$(document).ready(function() {
 
  var contentwidth = $(window).width();

  function imageresize(){
    //alert('Running imageresize()');
    if ((contentwidth) < 768){
      //alert('Mobile-sized window');
      $('.bprof-frame').css({
        'float':'none',
        'width':'100%'
      });
      $('.saga-box').css({
        'float':'none',
        'width':'100%'
      });
    }
    else {
      //alert('Regular window');
    }
  } // END IMAGERESIZE()

  imageresize();//Triggers when document first loads    

  $(window).on("resize", function(){
    imageresize();
  }); // END ON-RESIZE

 }); // END DOCUMENT READY