tengo un diseño realizado en bootstrap, pero una columna (la que contiene la imagen #icon_change) se oculta por detrás de las otras columnas al visualizarse en celular o al reducir la ventana en la pc. Revisé pero no logro acertar con el comportamiento de la misma.
https://crisav.com.pe/dmtc-form1.php
Gracias por sus comentarios.
<div class="row">
<div
class="landing_option card col-5 col-5-sm dis-inline-block text-center "
id="change_panel_2">
<div
class="col-4 col-5-sm dis-inline-block on-resp"
style="vertical-align: top; text-align: center; margin-top: -1px;">
<span class="fs-18 font-heavy" style="line-height: 1;">USD</span>
<br class="hidden-sm">
<span class="fs-20">$</span>
</div>
<div
class="landing_option_right col-8 col-7-sm dis-inline-block p-t-8">
<div class="inp inp_label filled">
<label id="label_amount">Tú Compras</label>
<input
class="inp_hint" id="inp_amount"
placeholder="" value="1500" maxlength="12"
oninput="decimalOnly(this); numberWithCommas(this); updateChangeFromPrice();">
</div>
</div>
</div>
<div
class="col-2 col-2-sm landing_option dis-inline-block text-center"
style="height:100%">
<div
class=" dis-inline-block text-center" style="vertical-align: bottom;">
<img
class="m-t-8 rotated" id="icon_change"
src="./images/icono-cambiar.png"
style="cursor: pointer;"
onclick="updateSelectedAction()"
alt="casa de cambio online">
</div>
</div>
<div
class="col-5 col-5-sm landing_option card dis-inline-block text-center "
id="change_panel_1">
<div
class="col-4 col-5-sm dis-inline-block on-resp"
style="vertical-align: top; text-align: center; margin-top: -1px;">
<span class="fs-18 font-heavy m-l-6" style="line-height: 1;">PEN</span>
<br class="hidden-sm">
<span class="fs-20 m-l-6">S/</span>
</div>
<div
class="landing_option_right col-8 col-7-sm dis-inline-block p-t-8">
<div class="inp inp_label filled ">
<label id="label_amount_2">Tú Transfieres</label>
<input
class="inp_hint" id="inp_amount_2"
placeholder="" value="1,000" maxlength="12"
oninput="decimalOnly(this); numberWithCommas(this); updateChangeFromOutput();">
</div>
</div>
</div>
</div>
div
que contiene el icon_change de tu interés, tiene aplicadostyle
(aunque no le pones!important
) puede afecte tu diseño responsivo. loscol-
que pones con loscol-sm-
es el mismo efecto que con solocol-
; también esta el detalle que eldiv
donde tienes elimg
no tiene la clasecard
de los otros.