賢威のカラム機能で横幅を調整するCSS

.w05{ width: 5%; }
.w10{ width: 10%; }
.w15{ width: 15%; }
/* 以下、省略 */

<div class="show-sample">
<div class="clearfix">
<div class="left m0 p10 bdr_pink w30">左のボックスのサイズを30％にしています。</div>
<div class="left m0 p10 bdr_lime w40">真ん中のボックスのサイズを40％にしています。</div>
<div class="right m0 p10 bdr_aqua w30">右のボックスのサイズを30％にしています。</div>
</div>

@media (min-width: 480px) {
.col2-wrap > .col_ns.w-30,
.col2-wrap > .col.w-30 {
width: 30% !important;
}
.col2-wrap > .col_ns.w-35,
.col2-wrap > .col.w-35 {
width: 35% !important;
}
.col2-wrap > .col_ns.w-40,
.col2-wrap > .col.w-40 {
width: 40% !important;
}
.col2-wrap > .col_ns.w-60,
.col2-wrap > .col.w-60 {
width: 60% !important;
}
.col2-wrap > .col_ns.w-65,
.col2-wrap > .col.w-65 {
width: 65% !important;
}
.col2-wrap > .col_ns.w-70,
.col2-wrap > .col.w-70 {
width: 70% !important;
}
}

<div class="col2-wrap">
<div class="col_ns w-30">文章（最大横幅の30%）</div>
<div class="col_ns w-70">画像（最大横幅の70%）</div>
</div>

<div class="col2-wrap">
<div class="col w-30">文章（最大横幅の30%）</div>
<div class="col w-70">画像（最大横幅の70%）</div>
</div>