当屏幕尺寸小于480px时，我需要重新排序div。
我不想使用，position: absolute因为绿色区域的高度可能会因文字数量而异。
我需要将小屏幕顺序设置为红色，绿色，红色，绿色，红色，绿色（每个红色都位于紧邻的绿色之上，宽度为100％）。
任何的想法？非常感谢
*, html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: inline-block;
box-sizing: border-box;
}
.full_half {
display: inline-block;
width: 50%;
background-color: green;
float: left;
min-height: 100px;
}
.pic {
background-color: red;
height: 100px;
}
.text {
box-sizing: border-box;
padding: 20px 120px;
}
@media screen and (max-width: 480px) {
.full_half {
width: 100%;
}
.text{
padding: 0 0 !important;
}
}<div class="container">
<div class="full_half pic"></div>
<div class="full_half text">test</div>
</div> …我设法解雇了
$('.edit').click(function(){} 和 $('.button').click(function(e){}
$('.edit').click(function(){
// uid = userid
var uid = '123';
var self = $(this);
// closest in the parent elements
// use .find with caution unless you sure you have only one .input
// contenteditable makes element editable. use with caution as it accepts html tags, javascript
// .addClass for styling
var input = self.closest('tr').find('.input');
input.attr('contenteditable','true').addClass('editable');
self.closest('td').html('<span class="button">Save</span>');
$('.button').click(function(e){
e.preventDefault();
var field = $(this).closest('tr').data('field');
// get text instead of html from editable tr
var value = $(this).closest('tr').find('.input.editable').text(); …