Cocoonで２カラムレイアウトを使用してレスポンシブな説明用吹き出しを実現する方法

/*吹き出しレスポンシブ*/

.column-wrap .column-right {
    border-left: none;
}

.fukidashi {
border: #ccc solid 4px;
position: relative;
background: #fff;
padding: 12px 10px;
border-radius: 13px;
margin-bottom:1em;
}
.fukidashi:before {
border-right: 40px solid #ccc;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 30%;
content: "";
position: absolute;
left: -40px;
}
.fukidashi:after {
content: "";
position: absolute;
border-right: 39px solid #fff;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 30%;
left: -32px;
}

@media screen and (max-width: 600px) {
.container .column-wrap > div {
    width: 100%;
    padding: 0 0;
}   
.fukidashi {
border-radius: 6px;
background: #fff;
margin-top: 7px;
border: solid 2px silver;
}
.fukidashi:before {
border-bottom: 20px solid silver;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -40px;
content: "";
position: absolute;
left: 40%;
}
.fukidashi:after {
border-bottom: 20px solid #fff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -37px;
content: "";
position: absolute;
left: 40%;
}
}