<div class="subpageBox">
  <!-- 文章 -->
  <div class="subpageBoxL2">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </div>
  <!-- 画像 -->
  <div class="subpageBoxR2">
    <img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt="">
  </div>
</div>
/*画像+文章 style.css 1958-1977,2027-2073行目
========================================================================== */
.subpageBox {
    width: 97%;
    margin: 0 auto;
    padding: 16px;
}

@media (max-width: 763px) {
    .subpageBox {
        width: 96%;
        margin: 0 auto;
        padding: 0px 8px;
    }
}

.subpageBox:after,
.subpageBox:before {
    clear: both;
    content: "";
    display: block;
}

/*画像(右)文章(左*/
.subpageBoxL2 {
    width: 66%;
    float: left;
    padding: 8px;
}

.subpageBoxR2 {
    width: 30%;
    float: left;
    padding: 8px;
}

@media (max-width: 763px) {

    .subpageBoxL2 {
        width: 96%;
        float: none;
        padding: 8px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    }

    .subpageBoxR2 {
        width: 96%;
        float: none;
        padding: 8px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width:1028px) and (min-width: 764px) {

    .subpageBoxR2 {
        width: 40%;
        float: left;
        padding: 8px;
    }

    .subpageBoxL2 {
        width: 55%;
        float: left;
        padding: 8px;
    }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.